jQuery实现tab栏切换效果:
用jQuery做tab的效果就是点击或者鼠标悬浮在tab上时显示对应的内容，并且tab栏也会发生相应的样式变化。jQuery我用的是jquery-1.11.1.js版本。
下面的代码是简单的实现：
HTML代码
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>jQuery实现tab栏切换效果</title>
6 <link rel="stylesheet" type="text/css" href="style.css">
7 <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
8 </head>
9 <body>
10 <nav>
11 <ul>
12 <li class="tab">加菲猫</li>
13 <li>柯基犬</li>
14 <li>垂耳兔</li>
15 <li>荷兰猪</li>
16 </ul>
17 </nav>
18 <div class="content">
19 <div class="div_show">
20 <img src="images/加菲猫.jpg">
21 </div>
22 <div>
23 <img src="images/柯基犬.jpg">
24 </div>
25 <div>
26 <img src="images/垂耳兔.jpg">
27 </div>
28 <div>
29 <img src="images/荷兰猪.jpeg">
30 </div>
31 </div>
32 <script>
33 $(‘ul li‘).click(function(event) {
34 $(this).addClass(‘tab‘);
35 $(this).siblings().removeClass(‘tab‘);
36
37 $(‘.content div‘).eq($(this).index()).addClass(‘div_show‘);
38 $(‘.content div‘).eq($(this).index()).siblings().removeClass(‘div_show‘);
39 })
40 </script>
41 </body>
42 </html>
css代码
*{
list-style: none;
margin: 0px;
padding: 0px;
}
nav{
width: 800px;
height: 50px;
background: #ddffab;
margin: 100px auto 50px;
padding-left: 100px;
}
ul li{
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
border-radius: 25px;
float: left;
font-size: 24px;
color: #470a47;
background: #acdeff;
margin-right: 100px;
cursor: pointer;
}
.tab{
background: #ffabdd;
}
.content{
width: 550px;
height: 390px;
border: 5px dashed #abdeff;
margin: 0 auto;
}
.content div{
display: none;
}
.content .div_show{
display: block;
}
.content img{
width: 550px;
height: 390px;
}
最终效果（默认tab：加菲猫）
点击柯基犬tab
点击荷兰猪tab
前端小白上路可加前端技术交流群：854656221，有不懂截图代码或者bug大家一起探讨学习，欢迎前端大佬和萌新~
原文地址：https://www.cnblogs.com/nbb-hbb/p/9798657.html
时间： 2024-10-12 14:57:01