jquery+css實現(xiàn)Tab欄切換的代碼實例

前幾天面試碰到現(xiàn)場給寫一個Tab欄切換的功能，思想基本上懂，但是好久沒寫過，一時要全部實現(xiàn)效果還真有點難。回來后，再把思路理一理，寫一個，基礎(chǔ)還是很重要的。

成都創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),永勝企業(yè)網(wǎng)站建設(shè),永勝品牌網(wǎng)站建設(shè),網(wǎng)站定制,永勝網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,永勝網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

最終要實現(xiàn)的效果圖如下：

（1）點擊tab欄顯示對應(yīng)的內(nèi)容，并且tab欄樣式變化。實現(xiàn)方式：一般tab欄如果要做成比較好看的樣式，會切兩張圖作為背景，一張用于選中時的背景，一張用于未選中的背景。這里為了簡單，只用css設(shè)置樣式。然后為每個tab綁定click事件，當觸發(fā)click事件時，對應(yīng)的內(nèi)容div的display設(shè)置block，否則設(shè)置為none。

（2）當鼠標懸停在沒有選中的tab欄上時，改變樣式，移開時又恢復(fù)回來的樣式。如果tab欄已選中，則鼠標是否懸停不影響樣式。實現(xiàn)方式：為tab欄添加hover事件，當鼠標進入時，判斷該tab欄是不是被選中（可以為了選中的tab欄設(shè)置一個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>
 <!-- 對應(yīng)顯示內(nèi)容 -->
 <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實現(xiàn)Tab欄切換詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！

新聞名稱：jquery+css實現(xiàn)Tab欄切換的代碼實例
標題網(wǎng)址：http://bm7419.com/article38/iiohpp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、網(wǎng)站制作、企業(yè)網(wǎng)站制作、微信公眾號、App開發(fā)、軟件開發(fā)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容