溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前幾天面試碰到現場給寫一個Tab欄切換的功能，思想基本上懂，但是好久沒寫過，一時要全部實現效果還真有點難。回來后，再把思路理一理，寫一個，基礎還是很重要的。
最終要實現的效果圖如下：
（1）點擊tab欄顯示對應的內容，并且tab欄樣式變化。實現方式：一般tab欄如果要做成比較好看的樣式，會切兩張圖作為背景，一張用于選中時的背景，一張用于未選中的背景。這里為了簡單，只用css設置樣式。然后為每個tab綁定click事件，當觸發click事件時，對應的內容div的display設置block，否則設置為none。
（2）當鼠標懸停在沒有選中的tab欄上時，改變樣式，移開時又恢復回來的樣式。如果tab欄已選中，則鼠標是否懸停不影響樣式。實現方式：為tab欄添加hover事件，當鼠標進入時，判斷該tab欄是不是被選中（可以為了選中的tab欄設置一個class，只需要判斷是否含有該class即可），在不選中的情況下再添加hover的樣式。
完整代碼如下（代碼下載地址）：
HTML：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>tab標簽</title> <link href="css/style.css" rel="external nofollow" type="text/css" rel="stylesheet"> </head> <body> <div class="tab-contain"> <!-- tab欄 --> <ul id="tabs"> <li class="current"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="tab1">One</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="tab2">Two</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="tab3">Three</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="tab4">Four</a></li> </ul> <!-- 對應顯示內容 --> <div id="content"> <div id="tab1" class="item show"> <h3>title 11111</h3> <p>text here!!!text here!!!text here!!!text here!!!text here!!!</p> <p>text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!</p> </div> <div id="tab2" class="item"> <h3>title 2222</h3> <p>text here!!!text here!!!text here!!</p> <p>text here!!!text here!!!text here!!!text here!text here!!!text here!!!text here!!!</p> </div> <div id="tab3" class="item"> <h3>title 33333</h3> <p>text here!!!</p> <p>text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!</p> </div> <div id="tab4" class="item"> <h3>title 44444</h3> <p>text here!!!text here!!!text here!!!text here!!!text here!!!</p> <p>text here!!!text </p> </div> </div> </div> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="js.js"></script> </body> </html>
CSS:
.tab-contain{
margin: 50px auto;
width: 1000px;
padding:100px;
background: #7F7D7D;
}
#tabs {
overflow: hidden;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
#tabs li {
float: left;
margin: 0;
}
li a {
position: relative;
background: #ddd;
padding: 10px 50px;
float: left;
text-decoration: none;
color: #444;
text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
border-radius: 20px 20px 0 0;
box-shadow: 0 2px 2px rgba(0, 0, 0, .4);
}
.current a{
outline: 0;
background: #fff;
z-index: 4;
}
.hoverItem a{
background: #AAC8B9;
}
#content {
background: #fff;
padding: 50px;
height: 220px;
position: relative;
border-radius: 0 5px 5px 5px;
box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
}
.item{
display: none;
}
.show{
display: block;
}
JS:
$(function(){
$('#tabs a').click(function(e) {
e.preventDefault();
$('#tabs li').removeClass("current").removeClass("hoverItem");
$(this).parent().addClass("current");
$("#content div").removeClass("show");
$('#' + $(this).attr('title')).addClass('show');
});
$('#tabs a').hover(function(){
if(!$(this).parent().hasClass("current")){
$(this).parent().addClass("hoverItem");
}
},function(){
$(this).parent().removeClass("hoverItem");
});
});
以上所述是小編給大家介紹的jquery css實現Tab欄切換詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
