网页选项卡,模块显示

来源：互联网发布：matlab mac版多少钱编辑：程序博客网时间：2024/05/16 15:04

具体效果如下图所示：

具体实现代码如下：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
* {
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;
}
</style>
<script src="jquery-1.11.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var $div_li = $("div.tab_menu ul li");
$div_li.click(function () {
//当前li元素高亮
$(this).addClass("selected") //去掉其他同辈li元素的高亮
.siblings().removeClass("selected");
//获取当前点击li元素在全部li元素中国的索引
var index = $div_li.index(this);
//选取子节点。不选取子节点的话，会引起错误，如果里面还有div
$("div.tab_box>div") //显示li元素对应的div元素
.eq(index).show()
.siblings().hide();//隐藏其他几个同辈的div元素
}).hover(function () {
$(this).addClass("hover");
}, function () {
$(this).removeClass("hover");
})
});
</script>
</head>
<body>
<div class="tab">
<div class="tab_menu">
<ul>
<li class="selected">新闻</li>
<li>财经</li>
<li>视频</li>
</ul>
</div>
<div class="tab_box">
<div>新闻信息</div>
<div class="hide">财经信息</div>
<div class="hide">视频信息</div>
</div>
</div>
</body>
</html>

0 0