jQuery 网页选项卡的示例代码__tab_menu_function_background_hover_selected_

当前位置: 编程技术>jquery

jQuery 网页选项卡的示例代码

来源: 互联网发布时间：2014-09-03

本文导语: 本节内容： jquery 网页选项卡。例子：代码示例: jQuery 选项卡 - www. *{ margin:0; padding:0;} body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;} .tab { width:240px;margin:50px;} .tab_menu { clear:both;} ....

本节内容：
jquery 网页选项卡。

例子：

代码示例:

jQuery 选项卡 - www.  

 *{ margin:0; padding:0;}  

 body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}  

 .tab { width:240px;margin:50px;}  

 .tab_menu { clear:both;}  

 .tab_menu li { float:left; text-align:center; cursor:pointer; list-style:none; padding:1px 6px; margin-right:4px; background:#F1F1F1; border:1px solid #898989; border-bottom:none;}  

 .tab_menu li.hover { background:#DFDFDF;}  

 .tab_menu li.selected { color:#FFF; background:#6D84B4;}  

 .tab_box { clear:both; border:1px solid #898989; height:100px;}  

 .hide{display:none}  

时事

体育

娱乐

时事

体育

娱乐

$(function(){  

    var $li = $("div.tab_menu ul li");  

    $li.click(function(){  

        $(this).addClass('selected')  //当前元素高亮  

        .siblings().removeClass('selected'); //去掉其它同辈
元素的高亮  

        var index = $("div.tab_menu ul li").index(this); // 获取当前点击的
元素 在 全部li元素中的索引。  

        $('div .tab_box > div') //选取子节点。不选取子节点的话，会引起错误。如果里面还有div   

        .eq(index).show()       //显示 
元素对应的元素  

        .siblings().hide();     //隐藏其它几个同辈的元素  

        .hover(function(){  

            $(this).addClass('hover');  

        }, function(){  

            $(this).removeClass('hover');  

        })  

    })  

})