jQuery實現選項卡切換圖片

本文例項為大家分享了實現選項卡切換圖片的具體程式碼，供大家參考，具體內容如下

效果：

jQuery實現選項卡切換圖片

弄出來這個效果，你需要找4張大小相同的圖片，大小不一樣弄出來效果會很難看

程式碼：

<!DOCTYPE html>
<html lang="ch">
  <head>
    <meta charset="UTF-8">
    <title>使用jQuery實現選項卡切換圖片</title>
    <style>
      *{
        margin: 0;
        padding: 0;
      }
      .box{
        width: 533px;
        height: 350px;
        border: 1pwww.cppcns.com 
x solid plum;
        margin: 50px auto;
      }
      .nav>li{
        list-style: none;
        width: 133.25px; /*總寬度除以4得到的*/
        height: 50px;
        background: #8000ff;
        text-align: center;
        line-height: 50px;
        float: left;
      }
      .nav>.current{
        background: #69ff8f;
      }
      .content>li{
        list-style: none;
        display: none;
      }
      .content>.show{
        display: block;
      }
    </style>
    <script src="/jquery-1.12.4.js"></script>
    <script>
      $(function () {
        // 監聽選項卡的移入事件
        $(".nav>li").mouseenter(function () {
          // 修改被移入選項卡的背景顏色
      www.cppcns.com 
    $(this).addClass("current");
          // 還原其它兄弟選項卡的背景顏色
          $(this).siblings().removeClass("current");
          // 獲取當前移出選項卡的索引
          var index = $(this).index();
          // 根據索引找到對應的圖片
          var $li = $(".content>li").eq(index);
          // 隱藏非當前的其它圖片
          $li.siblings().removeClass("show");
          // 顯示對應的圖片
          $li.addClass("show");
        });
      });
    </script>
  </head>
  <body>
    <div class="bwww.cppcns.com 
ox">
      <ul class="nav">
        <li class="current">圖片1</li>
        <li>圖片2</li>
        <li>圖片3</li>
    http://www.cppcns.com    <li>圖片4</li>
      </ul>
      <ul class="content">
        <li class="show"><img src="img/111.jpg" alt="jQuery實現選項卡切換圖片"></li>
        <li><img src="img/222.jpg" alt="jQuery實現選項卡切換圖片"></li>
        <li><img src="img/333.jpg" alt="jQuery實現選項卡切換圖片"></li>
        <li><img src="img/444.jpg" alt="jQuery實現選項卡切換圖片"></li>
      </ul>
    </div>
  </body>
</html>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

jQuery實現選項卡切換圖片

jQuery實現選項卡切換圖片

jQuery實現滑鼠滑動切換圖片

基於Ionic3實現選項卡切換並重新載入echarts

原生js實現選項卡切換

JavaScript實現Tab選項卡切換

小程式實現多個選項卡切換

bootstrap實現tab選項卡切換

微信小程式實現選項卡滑動切換

JS實現選項卡外掛的兩種寫法（jQuery和class）

qt tablewidget 實現tab來回切換_原生JS實現TAB選項卡切換效果

Vue實現Tab選項卡切換

JS實現多重選項卡切換輪播圖

js實現選項卡效果

用JS實現選項卡

jQuery實現的移動端圖片縮放功能元件示例

vue和animate動畫庫實現選項卡

微信小程式上拉載入分頁資料---包括tab選項卡切換（優化方案）

js利用iframe實現選項卡效果

jQuery實現朋友圈檢視圖片

vue使用swiper實現左右滑動切換圖片

jQuery實現選項卡切換圖片

相關推薦