2009年01月15日 22:28

javascript 反転処理1

| http://www.kantenna.com/cgi-bin/mt/mt-tb.cgi/427

タブパネルを自力で実装することになった場合、 ひとつの要素がtrue(表示)の時、 その他の要素をfalse(非表示)にさせる仕組みって どうすればいいんだろうと思って試し書き。

サンプルコード

id="test"内のli要素がクリックされた場合、 クリックされたliの背景は青、その他のliの背景は黒になるように。 


onload = function()
{
    // id="test"内のli要素を取得
    var lis = document.getElementById("test").getElementsByTagName("li");

    for(var i=0; i<lis.length; i++){

        //自分がlisの何番目の要素か
        lis[i].num = i;

        //最初はfalse
        lis[i].flag = false;

        // クリックされた時の処理
        lis[i].onclick = function(){
            turnOver(this.num);
        }
    }

    // li.flagを反転させる
    function turnOver(k){
        for(var i=0; i<lis.length; i++){
            if (i == k) {
                lis[i].flag = true;
            } else {
                lis[i].flag = false;
            }
        }
        cssChange();
    }

    // obj.flagの値によりCSSを変化
    function cssChange(){
        for(var i=0; i<lis.length; i++){
            if (lis[i].flag) {
                lis[i].style.backgroundColor = "blue";
            } else {
                lis[i].style.backgroundColor = "gray";
            }
        }
    }

    // 初期設定
    lis[0].style.backgroundColor = "blue";
}

-------------------
HTML
-------------------
<ul id="test">
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
<li>Menu5</li>
</ul>

実行結果

  • Menu1
  • Menu2
  • Menu3
  • Menu4
  • Menu5

とりあえずこんな感じで動くっぽい。

タブパネルを実現するライブラリはたくさんあるので 美しい処理がされているの探してみたいと思います。

改訂第4版 JavaScript ポケットリファレンス

著者 : 古籏 一浩 / 金額 : ￥ 2,499

javascript 反転処理1タグ:

トラックバック

  • http://www.kantenna.com/cgi-bin/mt/mt-tb.cgi/427
[WEBプログラム覚書]2009年01月29日 17:11
jQueryによる表示、非表示切り替え
jQueryによるDiv要素の表示、非表示切り替え
コメント (0)
コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)





この情報を登録しますか?


先月アクセスが多かったページ