<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页选项卡</title>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<style type="text/css">
li {
list-style-type: none;
width:50px;
float: left;
}
.tab {
width: 400px;
height: 400px;
border: 1px solid red
}
.tab_menu {
width: 400px;
height: 100px;
border: 1px solid red
}
.tab_box {
width: 400px;
height: 300px;
border: 1px solid red
}
.selected{
background-color: yellow;
}
</style>
<script type="text/javascript">
$(function() {
$(".hide").hide();
//单击li时进行高亮显示
$div_li= $("div.tab_menu ul li");
$("div.tab_menu ul li").click(function(){
//当前li高亮,并且去掉其他同辈li元素的高亮显示
$(this).addClass("selected").siblings().removeClass("selected");
//获取当前选中的li所在全部li元素中的索引。
var index= $div_li.index(this);
//选取子节点 ,显示li元素对应的div元素，隐藏其他几个同辈的div元素
$("div.tab_box > div").eq(index).show().siblings().hide();
});
});
</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><img alt="图片找不到" src="images/sjw.png"></div>
<div class="hide"><img alt="图片找不到" src="images/6.jpg"></div>
<div class="hide"><img alt="图片找不到" src="images/1.jpg"></div>
</div>
</div>
</body>
</html>
网页选项卡的切换
猜你喜欢
转载自2560240061.iteye.com/blog/2326167
今日推荐
周排行