选项卡例子html,jQuery 网页选项卡的示例代码

本节内容：

jquery 网页选项卡。

例子：

复制代码 代码示例:

jQuery 选项卡 - www.jbxue.com

*{ 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');

})

})

})