选项卡通过jQuery实现

最新推荐文章于 2022-11-07 23:45:19 发布

yys3155

最新推荐文章于 2022-11-07 23:45:19 发布

阅读量515

点赞数

本文链接：https://blog.csdn.net/yys3155/article/details/8747959

版权

<html>
<meta charset="utf-8">
<head>
<style>
*{margin:0;padding:0}
.select_muto{margin:auto;width:200px;}
.select_list ul li{list-style:none;float:left;border:1px solid #ccc;width:50px;text-align:center;margin-left:10px;line-height:20px;border-bottom:none;cursor:pointer;}
.select_con{clear:both;border:1px solid #ccc;width:200px;height:200px;margin-left:10px;}
.con{display:none;}
.list{background:#aaa;}
.st{background:#a90}
</style>
<script type="text/javascript" src="script/jquery-1.4.2.min.js"></script>
<script>
$(function(){
$(".select_list ul li").click(function(){
var $index=$(this).index();
$(".select_con div").eq($index).show().siblings().hide();
$(this).addClass("list").siblings().removeClass("list");
}).hover(function(){
$(this).addClass("st").siblings().removeClass("st");
},function(){
$(this).removeClass("st");
});
})
</script>
</head>

<body>
<div class="select_muto">
<div class="select_list">
<ul>
<li class="list">事件</li>
<li>新闻</li>
<li>体育</li>
</ul>
</div>
<div class="select_con">
<div>事件</div>
<div class="con">新闻</div>
<div class="con">体育</div>
</div>
</div>
</body>
</html>

yys3155

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
选项卡通过jQuery实现

*{margin:0;padding:0}.select_muto{margin:auto;width:200px;}.select_list ul li{list-style:none;float:left;border:1px solid #ccc;width:50px;text-align:center;margin-left:10px;line-height:20px;border
复制链接

扫一扫