jquery选显卡的实现

jQuery实现选项卡功能。首先将界面搭建好。

有导航头tab_menu，还有内容tab_box。

要实现的效果就是，点击后，将相应的内容显示出来，其他内容隐藏掉。

同时为了展现选中状态，为选中的项添加背景，以示区别。

 

这一次，我自己写了代码，先看html部分：

<div class="tab">    <div class="tab_menu">        <ul>            <li class="selected">时事</li>            <li>体育</li>            <li>娱乐</li>        </ul>    </div>    <div class="tab_box">          <div>时事</div>         <div class="hide">体育</div>         <div class="hide">娱乐</div>    </div></div>

html中，需要一个大的div，里面有两个子div，一个作为导航头tab_menu，一个作为内容体tab_box。css代码负责布局html内容。

 

css部分：

*{margin:0;padding:0;}.tab{    width:240px;    margin:50px;    /*border:1px solid;*/}.tab_menu{    clear:both;}.tab_menu li{    float:left;  //将导航头左飘    text-align:center;  //将文字居中    list-style:none;  //去除标记符号    background:#F1F1F1; //设置默认背景色    border:1px solid #898989; //设置边框色    margin-right:4px; //每个li之间的距离为4px    cursor:pointer;  //鼠标浮上之后，会有小手的标示出现    padding:1px 6px; //控制li的内部距离    border-bottom:none;     }.tab_menu li.hover{    background:#DFDFDF;}.tab_menu li.selected{//为选中的选项加背景与颜色    color:#FFF;     background:#6D84B4;}.tab_box{    clear:both; //清楚float效果的影响    height:100px; //设置高度为100px    border:1px solid #898989; //设置内容体的边框样式}.hide{//隐藏需要隐藏的内容div    display:none;}

待布局完成之后，进行jQuery的动作：

<script type='text/javascript'>$(function(){    //1.点击时改变css属性，移除之前的selected选项，添加新的selected选项    //2.隐藏之前的div层，显示对应得div层    //为导航中的li注册点击事件    var $div_li = $(".tab_menu ul li");    $div_li.click(function(){        $(this).addClass('selected').siblings().removeClass('selected');        //var index = $div_li.index(this);        //$("div.tab_box > div").eq(index).show().siblings().hide();        var text = $(this).text();        if(text=='时事')        {            $('.tab_box div:contains("时事")').removeClass('hide').siblings().addClass('hide');        }        if(text=='体育')        {            $('.tab_box div:contains("体育")').removeClass('hide').siblings().addClass('hide');        }        if(text=='娱乐')        {            $('.tab_box div:contains("娱乐")').removeClass('hide').siblings().addClass('hide');        }    }).hover(function(){            $(this).addClass("hover");        },function(){            $(this).removeClass("hover");        });});</script>

这是我写的jQuery代码，我的思路是，点击选项卡时，添加selected样式，同时移除兄弟选项卡的selected样式。

再一个，如何才能触发相应的tab_box中的内容的隐藏与显示呢？

我发现了他们有相对应的内容，就是选项头为“实事”的对应的选项体也为“实事”，选项头为“体育”的对应的选项提也为“体育”等。

我就想，先获取选项头的内容，做出判断，当它为不同的值时，就触发不同的效果。

 

效果是实现了，可是漏洞很明显，因为并不是所有的选项卡都是标题与内容体相对应。

 

再看看下面的代码：

<script type="text/javascript" >//<![CDATA[    $(function(){        var $div_li =$("div.tab_menu ul li");        $div_li.click(function(){            $(this).addClass("selected")            //当前<li>元素高亮                   .siblings().removeClass("selected");  //去掉其它同辈<li>元素的高亮            var index =  $div_li.index(this);  // 获取当前点击的<li>元素 在 全部li元素中的索引。            $("div.tab_box > div")       //选取子节点。不选取子节点的话，会引起错误。如果里面还有div                     .eq(index).show()   //显示 <li>元素对应的<div>元素                    .siblings().hide(); //隐藏其它几个同辈的<div>元素        })    })//]]></script>

这里的处理就特别的巧妙，它通过获取li的索引，对选项体进行处理。它巧妙的利用了一个隐藏的对应关系，就是索引值。

 

这样即便选项头与选项体内容不对应，一样可以实现联动效果。

 

通过这次练习，我觉得，自己先动脑子想一想还是很好的。可以发现思路的差异，才能够发现不足，知道差距。有时候甚至你的思路会更好呢！