jQuery实现的简易tab标签自动切换效果

最新推荐文章于 2021-06-19 05:54:38 发布

花婷飞扬

最新推荐文章于 2021-06-19 05:54:38 发布

阅读量235

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/yangyanhua1163706017/article/details/107488875

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="assets/js/jquery-1.10.2.js"></script>
<style>
.tacon{display: none;margin: 15px 30px;border: 1px solid #aaa;height: 200px;width: 300px;}
.tacon.select{display: block;}
.qhxg{overflow: hidden;list-style: none;}
.qhxg li{float: left;margin:0 10px;padding: 0 20px;}
.qhxg li.active{color: red;}
</style>
<script>
var index = 0;
$(function(){
$(".qhxg li").click(function(){
index = $(this).index();
$(this).addClass("active").siblings("li").removeClass("active");
$(".tacon").eq(index).addClass("select").siblings(".tacon").removeClass("select");
});
setInterval(function(){
var len = $(".qhxg li").length;
$('.qhxg li').eq(index+1).trigger('click');
if(index>=len-1){
index = -1;
}
},2000);
});
</script>
</head>
<body>
<ul class="qhxg">
<li class="active">tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<div class="tacon select">
haihaovdgds
</div>
<div class="tacon">
中文
</div>
<div class="tacon">
中gdsgdsg文
</div>
</body>
</html>

关注