var $div_li = $("div.tab_menu ul li");
var $div_div = $("div.tab_box>div");
2.给选项卡的标签添加事件一：当单击当前选项卡是时，当前<li>元素高亮，同时去掉其他同辈<li>元素的高亮var $div_div = $("div.tab_box>div");
$div_li.click(function(){
$(this).addClass("selected")//当前li元素高亮
.siblings().removeClass("selected");//去掉其他兄弟li元素的高亮
});
3.给选项卡的标签添加事件二：当前<li>元素对应的<div>元素内容显示，同时隐藏其他同辈<div>元素的高亮$(this).addClass("selected")//当前li元素高亮
.siblings().removeClass("selected");//去掉其他兄弟li元素的高亮
});
$div_li.click(function(){
var index = $div_li.index(this);//获取当前单击的li元素在全部li元素中的索引
$div_div.eq(index).show()//显示li元素对应的div元素
.siblings().hide();//隐藏其他几个同辈的div元素
});
4.添加鼠标划过标签时的效果var index = $div_li.index(this);//获取当前单击的li元素在全部li元素中的索引
$div_div.eq(index).show()//显示li元素对应的div元素
.siblings().hide();//隐藏其他几个同辈的div元素
});
$div_li.hover(function(){//事件交互hover(over,out)
$(this).addClass("hover");},function(){
$(this).removeClass("hover")
});
完整代码：$(this).addClass("hover");},function(){
$(this).removeClass("hover")
});