オリジナルjsとjQueryを使用して、簡単なtabページチェックを実現します.

tabラベルは、通常、空間が限られており、コンテンツが多く、ページの美しさとユーザーに情報の過剰な視覚疲労を与えない場合に適しています.使用面は非常に広く,以下では2つの方法で簡単に実現する.
まず、ページ要素を構築します.ラベルのクリック可能な部分は、ulとolを含むリストでロードされます.ここではラベルを横方向に分布させるので、左にフローティングさせる必要があります.ラベルの内容部分はdivベアラを使用すればよい.また、共通の要素に対してスタイルと動作を統一的に制御する必要があるため、次のdom構造があります.
　　

<div id="main">
           <ul id="tabbar" class="cl">
                <li class="t1">t1</li>
                <li class="def">t2</li>
                <li class="def">t3</li>
                <li class="def">t4</li>
                <li class="def">t5</li>
            </ul>
            <div id="content">
                <div class="cont t1">Hi !</div>
                <div class="cont t2">I Like You!</div>
                <div class="cont t3">Hello World!</div>
                <div class="cont t4">How Are You?</div>
                <div class="cont t5">I'm fine ,and you?</div>
            </div>
 </div>

ul左フローティング後、フローティングが後続要素に及ぼす影響をクリアするためにafter擬似クラスによってclear属性を設定し、ieの低バージョンとzoomを兼ねてie haslayoutをトリガする.次のスタイルがあります.

html,body,div,ul,li{margin:0; padding:0; }

.cl{zoom:1;}
.cl:after{display:block; height:0; clear:both; visibility:hidden; overflow:hidden; content:'.';}
ul{list-style:none;}
        
body{padding-top:100px; background:#eee; font-family:Microsoft YaHei, Arial, Helvetica, sans-serif;}
#main{margin:0 auto; width:800px;}
#main #tabbar{}
#main #tabbar li,#main #content .cont{text-align:center; color:#fff;}
#main #tabbar li{padding:0 20px; height:35px; line-height:35px; font-size:14px; cursor:pointer; float:left;}
#main #content{height:350px; overflow:hidden; position:relative;}
#main #content .cont{width:100%; height:350px; line-height:350px; font-size:48px; z-index:0; position:absolute;}

#main #tabbar li.def{color:#333; background:#fff;}
#main #tabbar li.t1,#main #content .cont.t1{color:#fff; background:#4e6b9c;}
#main #tabbar li.t2,#main #content .cont.t2{color:#fff; background:#c52946;}
#main #tabbar li.t3,#main #content .cont.t3{color:#fff; background:#33a6ff;}
#main #tabbar li.t4,#main #content .cont.t4{color:#fff; background:#ffab4e;}
#main #tabbar li.t5,#main #content .cont.t5{color:#fff; background:#64bccc;}

 
html部分は大体そうです.
オリジナルjsで実装する場合、ここでは主にliごとにクリックイベントをバインドし、クリックすることで現在のコンテンツページを表示し、他のコンテンツページを非表示にし、表示するプロセスはタイマを通じてコンテンツの透明度を完全に非表示または表示にするまで増減します.
　　

window.onload = function(){
    var tabs = document.getElementById("tabbar").getElementsByTagName("li");
    var cont = document.getElementById("content").getElementsByTagName("div");
    var len = cont.length;
    var flag = true;
    
    var fade = function(elem, callback, type){
        type || (type = "in");
        var px, timer;
        
        if(type == "in")
        {
            px = 0;
            timer = setInterval(function(){
                px += 3;
                if(px <= 100)
                {
                    elem.style.opacity ? (elem.style.opacity = (px / 100)) : (elem.style["filter"] = "alpha(opacity=" + px + ")");
                }
                else
                {
                    clearInterval(timer);
                    elem.style.opacity ? (elem.style.opacity = 1) : (elem.style["filter"] = "alpha(opacity=100)");
                    callback && callback(elem);
                }
            },10);
        }
        else
        {
            px = 100;
            timer = setInterval(function(){
                px -= 3;
                if(px >= 0)
                {
                    document.addEventListener ? (elem.style.opacity = (px / 100)) : (elem.style["filter"] = "alpha(opacity=" + px + ")");
                }
                else
                {
                    clearInterval(timer);
                    elem.style.opacity ? (elem.style.opacity = 0) : (elem.style["filter"] = "alpha(opacity=0)");
                    callback && callback(elem);
                }
            },10);
        }
    }
    
    for(var i = 0; i < len; i++)
    {
        cont[i].style.zIndex = len - i;
        tabs[i].index = cont[i].index = i;
        tabs[i].onclick = function(){
            if(flag)
            {
                flag = false;
                cont[this.index].style.display = "block";
                fade(cont[this.index]);
                for(var i = 0; i < len; i++)
                {
                    tabs[i].className = "def";
                    if(tabs[i].index != this.index)
                    {
                        fade
                        (
                            cont[i],
                            function(elem)
                            {
                                elem.style.display = "none";
                                elem.className = "cont t" + (elem.index + 1);
                                flag = true;
                            },
                            "out"
                        );
                    }
                }
                this.className = "t" + (this.index + 1);
            }
        }
    }
};

以上から分かるように、原生jsを使ってdomを操作するのは面倒で、そうでなければ「write less,do more」のjQueryも誕生しません.以下はjQueryで簡単に実現します.

$(function(){
        var tabs = $("#tabbar li");
        var cont = $("#content .cont");
        var len = cont.length;
        
        cont.each(function(inx, elem){$(elem).css("z-index", len - inx);}).andSelf().hide().andSelf().eq(1).show();
        
        tabs.click(function(){
            var inx = tabs.index(this);
            tabs.removeAttr("class").addClass("def").andSelf().eq(inx + 1).addClass("t" + (inx + 1));
            cont.fadeOut(300).not(this).andSelf().eq(inx).fadeIn(300);
        });
    }
);

 
この例は簡単ですが、実用的です.もちろん、実際の仕事ではそう書くことはありません.私たちは通常、これをベースに再利用可能なコントロールをカプセル化しますが、基本的な考えは変わりません.
コードのダウンロード