JQuery选项卡实现

     一、总结：

法1：

    <script type="text/javascript" src="scripts/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" language="javascript">
        $(function () {
//            $(".main_l_line2_box_list ul li:odd").css({ "background-color": "#f4f9fc" });
            $(".main_l_line2_box_title ul li").hover(function () {
                var tab_num1 = $(this).index();
                $(this).addClass("on").siblings().removeClass("on");
                $(this).parent().parent().siblings().children("ul").eq(tab_num1).css({ "display": "block" }).siblings("ul").css({ "display": "none" });
            });
//            $(".main_r_box2_list ul li:odd").css({ "background-color": "#f4f9fc" });
            $(".main_r_box2_title ul li").hover(function () {
                var tab_num1 = $(this).index();
                $(this).addClass("on").siblings().removeClass("on");
                $(this).parent().parent().parent().siblings().children("ul").eq(tab_num1).css({ "display": "block" }).siblings("ul").css({ "display": "none" });
            })
   
        });
</script>

//注释：<1>首先获取main_l_line2_box_title ul li这个对象，

<2>然后获取当前对象的索引   var tab_num1 = $(this).index();，

<3>给当前对像添加类别on然后获取同胞级别的元素移除类别on$(this).addClass("on").siblings().removeClass("on")应该先将第一个<li>加上类别on(为了加上背景图片);

<4>然后获取该元素的父节点的父节点的同胞元素的子节点ul根据索引设定是否显示    $(this).parent().parent().parent().siblings().children("ul").eq(tab_num1).css({ "display": "block" }).siblings("ul").css({ "display": "none" });

法二：

$(function(){

带参数遍历每一个选项卡：

$("#menu li").each(function(index){

$(this).click(function(){

//移除已选中的样式

$(#menu li.tabFocus).removeclass("tabFocus");

$(this).addclass("tabFocus");

//显示选项卡对应的内容并隐藏未被选中的内容

#("content li:eq("+index+")").show();

.siblings().hide();

});

});

})