<!-- .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 ================= -->
/* .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; }
<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>