Posted in Javascript onFebruary 28, 2014
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的索引,对选项体进行处理。它巧妙的利用了一个隐藏的对应关系,就是索引值。
这样即便选项头与选项体内容不对应,一样可以实现联动效果。
通过这次练习,我觉得,自己先动脑子想一想还是很好的。可以发现思路的差异,才能够发现不足,知道差距。有时候甚至你的思路会更好呢!
jQuery之选项卡的简单实现
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@