jQuery之选项卡的简单实现
jQuery之选项卡的简单实现
发布时间:2016-12-30 来源:查字典编辑
摘要:jQuery实现选项卡功能。首先将界面搭建好。有导航头tab_menu,还有内容tab_box。要实现的效果就是,点击后,将相应的内容显示出...

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

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

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

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

这一次,我自己写了代码,先看html部分:

复制代码 代码如下:

<div>

<div>

<ul>

<li>时事</li>

<li>体育</li>

<li>娱乐</li>

</ul>

</div>

<div>

<div>时事</div>

<div>体育</div>

<div>娱乐</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的索引,对选项体进行处理。它巧妙的利用了一个隐藏的对应关系,就是索引值。

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

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

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类