溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

jquery實(shí)現(xiàn)有過渡效果的tab切換的代碼詳解

發(fā)布時間：2020-07-17 17:36:29 來源：億速云 閱讀：173 作者：小豬 欄目：開發(fā)技術(shù)

這篇文章主要講解了jquery實(shí)現(xiàn)有過渡效果的tab切換的代碼詳解，內(nèi)容清晰明了，對此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會有幫助。

本文實(shí)例為大家分享了jquery實(shí)現(xiàn)tab切換的具體代碼，供大家參考，具體內(nèi)容如下

代碼：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
 <style type="text/css">
  ul,li {
  list-style: none;
  margin: 0;
  padding: 0;
  }
  .tabBox {
  width: 400px;
  height: 200px;
  border: 1px solid pink;
  }
  .ul1 {
  height: 40px;
  border-bottom: 1px solid pink;
  }
  .ul1 li {
  width: 25%;
  line-height: 40px;
  text-align: center;
  float: left;
  cursor: pointer;
  }
  .ul1 li.active {
  background-color: pink;
  transition: all 0.6s ease-in-out; /* 標(biāo)題過渡效果 */
  }
  .ul2 {
  overflow: hidden;
  }
  .ul2 li {
  display: none;
  }
  .ul2 li.selected {
  display: block;
  }
 </style>
 </head>
 <body>
 <div class="tabBox">
  <ul class="ul1">
  <li class="active">標(biāo)題1</li>
  <li>標(biāo)題2</li>
  <li>標(biāo)題3</li>
  <li>標(biāo)題4</li>
  </ul>
  <ul class="ul2">
  <li class="selected">內(nèi)容內(nèi)容1</li>
  <li>內(nèi)容2內(nèi)容2</li>
  <li>內(nèi)容3內(nèi)容3</li>
  <li>內(nèi)容4內(nèi)容4</li>
  </ul> 
 </div>
 <script type="text/javascript" src="jquery-2.1.1.js"></script>
 <script>
  $(function(){
  $(".ul1>li").mouseover(function(){
   $(this).addClass("active").siblings("li").removeClass("active");
   var index = $(this).index();
   $(".ul2>li:eq("+index+")").fadeIn(1000).siblings("li").hide(); 
  })
  }) 
 </script>
 </body>
</html>

看完上述內(nèi)容，是不是對jquery實(shí)現(xiàn)有過渡效果的tab切換的代碼詳解有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手