4-11. 首頁: 多組 Tabs 的設計

雖然 Tabs 外掛也有很多，但CSS樣式通常需要修改，而程式其實又很簡單，我的建議自己設計即可。

在左側3/4區域內安排HTML

  <!-- .tabs-1 area start =============== -->
  <div class="tabs">
    <ul>
      <li class="active">最新車聞</li>
      <li>試駕精選</li>
      <li>國際車訊</li>
      <li>中古車訊</li>
    </ul>
    <div class="tabContent">
      <div class="active">內容-1</div>
      <div>內容-2</div>
      <div>內容-3</div>
      <div>內容-4</div>
    </div>
  </div>
  <!-- .tabs-1 area end ================= -->

  <!-- .tabs-2 area start =============== -->
  <div class="tabs">
    <ul>
      <li>試駕精選1</li>
      <li class="active">試駕精選2</li>
      <li>試駕精選3</li>
    </ul>
    <div class="tabContent">
      <div>內容-1</div>
      <div class="active">內容-2</div>
      <div>內容-3</div>
    </div>
  </div>
  <!-- .tabs-2 area end ================= -->

  <!-- .tabs-3 area start =============== -->
  <div class="tabs">
    <ul>
      <li>新聞一</li>
      <li>新聞二</li>
      <li>新聞三</li>
      <li>新聞四</li>
      <li class="active">新聞五</li>
    </ul>
    <div class="tabContent">
      <div>內容-1</div>
      <div>內容-2</div>
      <div>內容-3</div>
      <div>內容-4</div>
      <div class="active">內容-5</div>
    </div>
  </div>
  <!-- .tabs-3 area end ================= -->

設計CSS樣式

  /* .tabs area ========================================= */
  .tabs { margin-bottom: 30px }
  
  /* 上方標籤 */
  .tabs ul { display: flex }
  .tabs ul li { background-color: #ccc; 
    padding: 6px 12px; margin: 5px 5px 0 0;
    border-radius: 5px 5px 0 0; cursor: pointer;
     }
  .tabs ul li.active { background-color: #ededed; 
    padding: 8px 12px; margin: 0 5px 0 0; 
    border: 1px solid #000; 
    border-bottom-color: transparent; 
    bottom: -1px; z-index: 1; position: relative; }

  /* 下方內容 */
  .tabContent { padding: 1rem;
    background-color: #ededed; 
    border: 1px solid #000; }
  .tabContent>div { 
    display: none; overflow: hidden; }
  .tabContent>div.active { display: block; }

設計 JS 程式控制

<script>
  //.tabs area 的控制=====================
  $('.tabs li').hover(function(){

    $(this).parents('.tabs').find('li').removeClass('active');
    $(this).addClass('active');

    $(this).parents('.tabs').find('div').removeClass('active');
    var no = $(this).index();
    $(this).parents('.tabs').find('.tabContent').children('div').eq(no).addClass('active');
  });
</script>