网页选项卡的切换

最新推荐文章于 2024-07-06 10:50:45 发布

iteye_7547

最新推荐文章于 2024-07-06 10:50:45 发布

阅读量164

点赞数

分类专栏： jquery 文章标签： html JavaScript ViewUI

本文链接：https://blog.csdn.net/iteye_7547/article/details/82673522

版权

jquery 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

<!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>

iteye_7547

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页选项卡的切换

网页选项卡li { list-style-type: none; width:50px; float: left;}.tab { width: 400px; height: 400px; border: 1px solid red}.tab_menu { width: 400px; height: 100px;...
复制链接

扫一扫