jQuery实现tab栏切换效果

Posted 2021-01-13 nbb-hbb

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery实现tab栏切换效果相关的知识，希望对你有一定的参考价值。

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：加菲猫）

技术分享图片