<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>内容与标签切换效果的实现</title>
<style type="text/css">
ul{
overflow: hidden;
padding: 0;
}
li{
float: left;
list-style:none;
width: 80px;
border: 1px solid;
text-align: center;
cursor:default;
}
li.select{background-color: yellow;}
.con-bar{
display: none;
width: 300px;height: 100px;
border: 1px solid;
}
.con-bar.select{display: block;}
</style>
</head>
<body>
<div class="down">
<ul>
<li class="select">标签1</li>
<li class="">标签2</li>
<li class="">标签3</li>
</ul>
<div class="content-group">
<div class="con-bar select">内容1</div>
<div class="con-bar">内容2</div>
<div class="con-bar">内容3</div>
</div>
</div>
<!-- 这里我直接使用baidu的CDN -->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
let tag = "ul li";
// 标签路径
let con = ".content-group .con-bar";
// 内容路径
$(tag).on('click', function(){ //监视标签
var index = $(this).index();
// 获取当前点击标签的索引
$(tag).removeClass('select').eq(index).addClass('select');
// 所有标签元素去除'select'类.选择索引标签元素.给标签添加类'selsect'类
$(con).removeClass('select').eq(index).addClass('select');
// 所有内容元素去除'select'类.选择索引内容元素.给内容添加类'selsect'类
})
})
</script>
</body>
</html>
【jquery】实现标签切换效果
最新推荐文章于 2024-03-09 15:45:51 发布