ブログでJavascriptが使えると知りタブ表示を実装して遊んでみた

自分のやりたいことって何だろう

寝るまでちょっと時間が空いたけど特に何かやる気も起きなかったため、とあるサイトを参考にJavascriptで遊んでいました。

参考にさせて頂いたのはこちら

hyper-text.org

はてなブログでJavascriptが埋め込めると今更知って、どうせなら一画面で変化がつけられてAjaxはいろんな意味ではまりそうなAjaxを除外するとタブが一番面白いかなと思ってやって見ました。

結果的にこうやって書いてるんだーという勉強の意味合いが強かったのですが、、

※WordPressで慣れてしまったからJavascriptとか1年ぶりくらいに書きました。

→HTML、CSSはもっと長い間書いていなかった。

なんやかんやで何とか完成したのがこちらです。

元ネタではW3C、HTML、CSSの説明ですが、ここでは実際に書いたソースを記載してますのでタブ切り替えて遊んでみて下さい。

あと個人的にはJavascriptのソースが良いなと思うのですがどうなんでしょうか？

ただでさえ実装の経験が浅いので教えて小さなことでも教えて頂けると幸いですm(__)m

HTML
CSS
Javascript

概要：タイトルをリストで持って、対応するテーブルを作成している。

<div id="javascript_tab_sample">
<ul id="tab">
<li class="selected"><a href="#id_html">HTML</a></li>
<li><a href="#id_css">CSS</a></li>
<li><a href="#id_js">Javascript</a></li>
</ul>
<dl id="id_html">
<dt>概要：タイトルをリストで持って、対応するテーブルを作成している。</dt>
<dd>
<p>...</p>
</dd>
</dl>

<dl id="id_css">
<dt>概要：もう少し明るい色にしたいけど眠いからまた今度</dt>
<dd>
<p> ...</p>
</dd>
</dl>

<dl id="id_js">
<dt>概要：タイトルをリストで持って、対応するテーブルを作成している。</dt>
<dd>
<p> ...</p>
</dd>
</dl>

概要：もう少し明るい色にしたいけど眠いからまた今度

a {
color:#099;
text-decoration:none;
}

a:hover {
color:#099;
text-decoration:underline;
}

ul {
list-style:none;
}

body#tab_sample h1 {
margin-bottom:2em;
font-size:200%;
font-weight:normal;
line-height:100%;
text-align:center;
}

body#tab_sample div#javascript_tab_sample {
margin:20px auto 0 auto;
width:450px;
text-align:left;
}

div#javascript_tab_sample ul#tab {
margin:0;
padding:0;
border-bottom:1px solid #000;
background-color:#fff;
float:left;
width:100%;
}

div#javascript_tab_sample ul#tab li {
margin:0 0 0 1em;
padding:0.2em 0;
text-align:center;
border:1px solid #000;
border-bottom:none;
float:left;
width:5em;
}

div#javascript_tab_sample ul#tab li.selected {
background-color:#000;
}

div#javascript_tab_sample ul#tab li.selected a {
color:#fff;
}

div#javascript_tab_sample dl {
margin:0;
padding:1em;
color:#fff;
border:1px solid #ccc;
border-top:none;
background-color:#000;
clear:both;
}

div#javascript_tab_sample dl dt {
margin-bottom:1em;
padding-bottom:1em;
border-bottom:1px dotted #fff;
}

div#javascript_tab_sample dl dd {

}

div#javascript_tab_sample dl dd p {
margin-bottom:1em;
}
--></style>

概要：リストを対象にクリックイベントを追加し初期化。あとはクリック時に表示が切り替わる。: <script type="text/javascript">// <![CDATA[
/*--setup--*/
window.onload=function() {
tab.setup = {
tabs: document.getElementById('tab').getElementsByTagName('li'),
pages: [
document.getElementById('id_html'),
document.getElementById('id_css'),
document.getElementById('id_js')
]
}
tab.init();
}
/*--setup end--*/

var tab = {
init: function(){
var tabs = this.setup.tabs;
var pages = this.setup.pages;

for(i=0; i<pages.length; i++) {
if(i !== 0) pages[i].style.display = 'none';
tabs[i].onclick = function(){ tab.showpage(this); return false; };
}
},

showpage: function(obj){
var tabs = this.setup.tabs;
var pages = this.setup.pages;
var num;

for(num=0; num<tabs.length; num++) {
if(tabs[num] === obj) break;
}

for(var i=0; i<pages.length; i++) {
if(i == num) {
pages[num].style.display = 'block';
tabs[num].className = 'selected';
}
else{
pages[i].style.display = 'none';
tabs[i].className = null;
}
}
}
}
// ]]></script>

もっとインデントとかしっかりしたいけど眠いので許してください。。

仕事も同じように楽しくやるのが一番いいですよね。。

ぼっちな天才が好き放題書くブログ

ぼっちな天才をやらせていただいてます。社会、仕事、教育を個人的な目線で好き放題書くのです・・・

ブログでJavascriptが使えると知りタブ表示を実装して遊んでみた

自分のやりたいことって何だろう