jQuery實現tab欄切換效果

時間 2019-11-24

標籤 jquery 實現 tab 切換效果欄目 JQuery 简体版

原文原文鏈接

jQuery實現tab欄切換效果:javascript

用jQuery作tab的效果就是點擊或者鼠標懸浮在tab上時顯示對應的內容，而且tab欄也會發生相應的樣式變化。jQuery我用的是jquery-1.11.1.js版本。css

下面的代碼是簡單的實現：html

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代碼java

*{
	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：加菲貓）jquery