Tab 的三种方法

看到网址上有很多tab。所有研究了一下关于tab。发现三种方法，分享一下

前台代码：

<div class="tabdiv">
    <div id="tab-container-1">
        <ul id="tab-container-1-nav">
            <li id="tablink1"><a href="#tab1" onmouseover='Show_Tab("1")'>tab 1</a></li> 
            <li id="tablink2"><a href="#tab2" onmouseover='Show_Tab("2")' >tab 2</a></li>
            <li id="tablink3"><a href="#tab3" onmouseover='Show_Tab("3")' >tab 3</a></li>           
            <li id="tablink4"><a href="#tab3" onmouseover='Show_Tab("4")' >tab 4</a></li>           
            <li id="tablink5"><a href="#tab3" onmouseover='Show_Tab("5")' >tab 5</a></li>           
        </ul> 
    
    <div class="tab" id="tab1" style=" display:block">
        <h2>tab 1</h2>
        <p>1.哈佛有一个著名的理论：人的差别在于业余时间，而一个人的命运决定于晚上8点到10点之间。每晚抽出2个小时的时间用来阅读、进修、思考或参加有意的演讲、讨论，你会发现，你的人生正在发生改变，坚持数年之后，成功会向你招手</p>
    </div>
    <div class="tab" id = "tab2">
        <h2>tab 2</h2>
        <p>2.无论你的收入是多少，记得分成五份进行规划投资：增加对身体的投资，让身体始终好用；增加对社交的投资，扩大你的人脉；增加对学习的投资，加强你的自信；增加对旅游的投资，扩大你的见闻；增加对未来的投资，增加你的收益。好好规划落实，你会发现你的人生逐步会有大量盈余。</p>
    </div>
    <div class="tab" id = "tab3">
        <h2>tab 3</h2>
        <p>3.过去的一页，能不翻就不要翻，翻落了灰尘会迷了双眼。有些人说不出哪里好，但就是谁都替代不了! 那些以前说着永不分离的人，早已经散落在天涯了。收拾起心情，继续走吧，错过花，你将收获雨，错过这一个，你才会遇到下一个。</p>
    </div>
    <div class="tab" id = "tab4">
        <h2>tab 4</h2>
        <p>4.被人误解的时候能微微的一笑，这是一种素养；受委屈的时候能坦然的一笑，这是一种大度；吃亏的时候能开心的一笑，这是一种豁达；无奈的时候能达观的一笑，这是一种境界；危难的时候能泰然一笑，这是一种大气；被轻蔑的时候能平静的一笑，这是一种自信；失恋的时候能轻轻的一笑，这是一种洒脱。</p>
    </div>
    <div class="tab" id = "tab5">
        <h2>tab 5</h2>
        <p>5.人生途中，有些是无法逃避的，比如命运；有些是无法更改的，比如情缘；有些是难以磨灭的，比如记忆；有些是难以搁置的，比如爱恋……与其被动地承受，不如勇敢地面对；与其鸟宿檐下，不如击翅风雨；与其在沉默中孤寂，不如在抗争中爆发……路越艰，阻越大，险越多，只要走过去了，人生就会更精彩。</p>
    </div> 
    </div>
    </div>

第一种是javascript方法：

<script type="text/javascript">
        function Show_Tab(active) {
            var tabsNumber = 5;
            for (i = 1; i <= tabsNumber; i++) {
                if (i != active) {
                    document.getElementById("tablink" + i).className = 'tab2'; //向指定元素添加CSS元素
                    document.getElementById("tab" + i).style.display = 'none'; //向指定元素添加style。
                }
                else {
                    document.getElementById("tablink" + i).className = 'tab1';
                    document.getElementById("tab" + i).style.display = 'block';
                }
            }
        }
    </script>

第二种是jQuery方法：   别忘了引入jQuery

<script type="text/javascript">
        $(function () {
            $("#tab-container-1 ul li").mouseover(function () {
                $(this).addClass("tab1").siblings().removeClass("tab1"); //被选中的li加CSS，其同辈去掉CSS
                var index = $("#tab-container-1 ul li").index(this); //获取被点击的li在全部li中的索引。
                $(".tab").eq(index).show().siblings().hide(); //根据索引选中.tab层show()。其同辈hide()
            })
        })
    </script>

第三种是一个插件Yetii： 需要Yetii这样一个开源的插件网址链接：http://www.kminek.pl/lab/yetii/ 

<script type="text/javascript">
        var tabber1 = new Yetii({
            id: 'tab-container-1',
            active: 1,
            tabclass:'tab'
            
        });
    </script>

最后CSS代码：

body
{
    font-family: 宋体, Arial, Helvetica, sans-serif;
    font-size: 16px;
    }
.tabdiv
{
    border:1px solid;
    margin:0 auto;
    width:400px; 
    }
#tab-container-1
 {
    margin:0 auto;
    width: 100%;
    text-align: left;
    margin-bottom: 10px;
    }
ul
{
    width:400px;
    padding: 10px 0 0 10px;
    height: 26px;
    border-bottom: 1px solid #BBB;
    }    
 ul li
{
    color: #005C9C;
    cursor: pointer;
    display: inline;
    margin-bottom: 0px;
    padding: 5px;
    background: white;
    float: left;
    font-weight: bold;
    font-size: 12px;
    text-align: center;
    position: relative;
    margin-right: 3px;
}

a
{
    text-decoration:none; 
    }

.tab1
 {
    background-color:#3399FF;
    color:#003399;
    font-weight:bold;
    text-decoration:none;
    border-right:1px solid #A2C0FE;
    height:16px;
    line-height:16px;  
     }
.tab2
 {
   line-height:16px; 
   }

这个Yetii还有很多种表现形式。

 

为什么开源的插件都是英文的呢？(答：天朝的程序猿都一门心思赚钱买房子)英语很重要啊！需要加强啊。当然google的chrome浏览器也很强大。