<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择卡</title>
<style>
*{
margin:0px;
padding: 0px;
}
.tab{
margin-top: 100px;
width: 1024px;
height: 768px;
margin-left: 200px;
position: absolute;
}
.tag{
position: relative;
width: 1024px;
height: 22px;
margin-bottom: 3px;
clear: both; /* 左右两侧不允许出现浮动元素 */
}
.tag ul li{
position: relative;
left: 0px;
list-style: none;
float: left;
border: 1px solid #ccc;
margin-left: 5px;
cursor: pointer;
padding: 2px 5px;
border-bottom: none;
}
.box{
position: relative;
/* top: 10px; */
width: 300px;
height: 200px;
border: 1px solid #ccc;
}
.box div{
padding:5px;
}
.tag li.selected{
background: #6D84B4;
}
.hide{
display: none;
}
</style>
<script src="jquery1.7.2.js"></script>
<script>
$(function(){
var $li=$(".tab .tag ul li");
$li.click(function(){ //给所有的li注册点击事件
$(this).addClass('selected');//当前<li>元素高亮
$(this).siblings().removeClass('selected');//去掉其它同辈<li>元素的高亮
var index=$(this).index();// 获取当前点击的<li>元素 在 全部li元素中的索引。
$(".box div").eq(index).show().siblings().hide();//显示 <li>元素对应的<div>元素,隐藏其它几个同辈的<div>元素
})
})
</script>
</head>
<body>
<div class="tab">
<div class="tag">
<ul>
<li class="selected">时事</li>
<li>体育</li>
<li>娱乐</li>
</ul>
</div>
<div class="box">
<div>时事</div>
<div class="hide">体育</div>
<div class="hide">娱乐</div>
</div>
</div>
</body>
</html>
用jQuery做选择卡案例
最新推荐文章于 2021-04-15 11:43:04 发布