您的位置：首页 > 数码常识数码常识
jquery写一个简单的tab切换（jquery实现tab切换效果）
2025-05-13人已围观
jquery写一个简单的tab切换（jquery实现tab切换效果）
tab选项卡切换效果应用到很多网页中，今天总结了一个超简单的切换效果，相信你一看就能学会。
jquery实现tab切换效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://.cn//jquery/jquery-1.11.1.min.js"></script>
<title>tab选项卡切换</title>
<style>
* {
list-style: none;
}
#outer {
width: 450px;
margin: 150px auto;
background: #fff;
}
#tab {
width: 409px;
border: #ccc solid 1px;
margin: 50px auto 0 auto;
}
#tab li {
float: left;
color: #7c4b04;
height: 30px;
cursor: pointer;
line-height: 30px;
padding: 0 20px;
}
#tab li.current {
color: #fff;
background: blue;
}
#content {
border: 1px solid #ccc;
border-top-width: 0;
height: 223px;
}
#content ul {
line-height: 25px;
display: none;
margin: 0 30px;
padding: 40px 0;
}
#content ul li {
line-height: 28px;
}
#content ul li a {
cursor: pointer;
}
</style>
</head>
<body>
<div>
<ul>
<li>今日热搜</li>
<li>体育新闻</li>
<li>css3</li>
</ul>
<div>
<ul>
<li>
<a>女子网上晒猫被泸州老窖索赔20万</a>
</li>
<li>
<a>韩国丈夫陪妻子打疫苗，得知资金也可以打后，瞬间激动得满眼放光</a>
</li>
<li>美国出现“招魂女孩”，现场表演异能，评委吓得逃走了</li>
</ul>
<ul>
<li>
<a>CBA三分王耍大牌</a>
</li>
<li>
<a>欧协杯附件赛传捷报，穆里尼奥罗马首秀获胜</a>
</li>
<li>
<a>096期体彩大乐透晒票，看着开奖结果，彩民笑了</a>
</li>
</ul>
<ul>
<li>tab3</li>
</ul>
</div>
</div>
<script>
$(function () {
$("#tab li").mouseover(function () {
var index=$(this).index();
$(this).addClass('current').siblings().removeClass('current');
$("#content ul").eq(index).css("display", "block").siblings().css("display", "none")
})
})
</script>
</body>
</html>
上面就是小居数码小编今天给大家介绍的关于（jquery实现tab切换效果）的全部内容，希望可以帮助到你，想了解更多关于数码知识的问题，欢迎关注我们，并收藏，转发，分享。
94%的朋友还想知道的：
分割pdf文件最简单的方法（怎样分割pdf文件）
PDF转换Word文件的操作方法（pdf最简单的转换word方法）
简单好用的介绍（批量pdf文件合并用什么软件好）
如何用ps制作3d文字效果（用ps做3d文字效果图）
156113
tab选项卡切换效果应用到很多网页中，今天总结了一个超简单的切换效果，相信你一看就能学会。
jquery实现tab切换效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://.cn//jquery/jquery-1.11.1.min.js"></script>
<title>tab选项卡切换</title>
<style>
* {
list-style: none;
}
#outer {
width: 450px;
margin: 150px auto;
background: #fff;
}
#tab {
width: 409px;
border: #ccc solid 1px;
margin: 50px auto 0 auto;
}
#tab li {
float: left;
color: #7c4b04;
height: 30px;
cursor: pointer;
line-height: 30px;
padding: 0 20px;
}
#tab li.current {
color: #fff;
background: blue;
}
#content {
border: 1px solid #ccc;
border-top-width: 0;
height: 223px;
}
#content ul {
line-height: 25px;
display: none;
margin: 0 30px;
padding: 40px 0;
}
#content ul li {
line-height: 28px;
}
#content ul li a {
cursor: pointer;
}
</style>
</head>
<body>
<div>
<ul>
<li>今日热搜</li>
<li>体育新闻</li>
<li>css3</li>
</ul>
<div>
<ul>
<li>
<a>女子网上晒猫被泸州老窖索赔20万</a>
</li>
<li>
<a>韩国丈夫陪妻子打疫苗，得知资金也可以打后，瞬间激动得满眼放光</a>
</li>
<li>美国出现“招魂女孩”，现场表演异能，评委吓得逃走了</li>
</ul>
<ul>
<li>
<a>CBA三分王耍大牌</a>
</li>
<li>
<a>欧协杯附件赛传捷报，穆里尼奥罗马首秀获胜</a>
</li>
<li>
<a>096期体彩大乐透晒票，看着开奖结果，彩民笑了</a>
</li>
</ul>
<ul>
<li>tab3</li>
</ul>
</div>
</div>
<script>
$(function () {
$("#tab li").mouseover(function () {
var index=$(this).index();
$(this).addClass('current').siblings().removeClass('current');
$("#content ul").eq(index).css("display", "block").siblings().css("display", "none")
})
})
</script>
</body>
</html>
上面就是小居数码小编今天给大家介绍的关于（jquery实现tab切换效果）的全部内容，希望可以帮助到你，想了解更多关于数码知识的问题，欢迎关注我们，并收藏，转发，分享。
94%的朋友还想知道的：
分割pdf文件最简单的方法（怎样分割pdf文件）
PDF转换Word文件的操作方法（pdf最简单的转换word方法）
简单好用的介绍（批量pdf文件合并用什么软件好）
如何用ps制作3d文字效果（用ps做3d文字效果图）
156113
很赞哦！ ()