CSS:
.clear{clear:both; height:0px; overflow:hidden;}
.tab{width:400px; font-size:12px;}
.tab_menu ul{padding:0px;margin:0px;}
.tab_menu li{list-style:none; display:block; float:left;
background:#C2CEFE; height:22px; line-height:22px;
padding: 0px 8px; margin-right:6px; border:#86B4CA 1px solid;
}
.box{width:400px; height:200px; overflow:hidden; border:#A8C9D9 1px solid; padding:10px 8px; }
.tab_menu ul li.selected{background:#dadada; cursor:pointer; }
.hide{display:none;}
jQuery:
$(function() {
var $menu_li = $("div.tab_menu ul li"); //选取网页选项卡
$menu_li.click(function(){
$(this).addClass("selected") //当前
高亮
.siblings().removeClass("selected"); //去掉其它同辈的高亮
var index = $menu_li.index( $(this) ); //找到子节点的索引
$("div.tab_box > div").eq(index).show() //索引为N的DIV显示出来
.siblings().hide(); //其它的选项卡隐藏
})
})
html:
Statement:The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn