jQuery之选项卡的简单实现_jquery

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

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

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

这一次，我自己写了代码，先看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的动作：
代码如下:

$(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");
});
});


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

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

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

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

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

再看看下面的代码：
代码如下:

// $(function(){
var $div_li =$("div.tab_menu ul li");
$div_li.click(function(){
$(this).addClass("selected") //当前