JQuery学习笔记22——网页选项卡

1.获取选项卡的标签数组及选项卡内容的数组
var $div_li = $("div.tab_menu ul li");
var $div_div = $("div.tab_box>div");
2.给选项卡的标签添加事件一：当单击当前选项卡是时，当前<li>元素高亮，同时去掉其他同辈<li>元素的高亮
$div_li.click(function(){
        $(this).addClass("selected")//当前li元素高亮
        .siblings().removeClass("selected");//去掉其他兄弟li元素的高亮
});
3.给选项卡的标签添加事件二：当前<li>元素对应的<div>元素内容显示，同时隐藏其他同辈<div>元素的高亮
$div_li.click(function(){
        var index = $div_li.index(this);//获取当前单击的li元素在全部li元素中的索引
        $div_div.eq(index).show()//显示li元素对应的div元素
                .siblings().hide();//隐藏其他几个同辈的div元素
});
4.添加鼠标划过标签时的效果
$div_li.hover(function(){//事件交互hover(over,out)
        $(this).addClass("hover");},function(){
        $(this).removeClass("hover")
 });
完整代码：
Code
posted @ 2009-07-27 11:26  郭培  阅读(403)  评论(0)  编辑  收藏  举报