jQuery 選項卡在單擊時無法正常工作

Question

我正在使用 jQuery 創建一個選項卡，單擊另一個選項卡時需要單擊它。 但它不能正常工作，我的代碼有問題。 我試圖尋找其他解決方案，但仍然沒有奏效。 誰能幫我？ 先感謝您。

這是我的代碼。 https://codepen.io/christine-tine27/pen/poRxeYJ

 $('.tabs ul li:first').addClass('active'); $('.tabs div.tabs div').hide(); $('.tabs div:first.tabs div').show(); $('.tabs ul li').click(function(){ $('.tabs ul li').removeClass('active'); $(this).addClass('active'); $('.tabs div.tabs div').hide(); var activeTab = $(this).find('a').attr('href'); $(activeTab).fadeIn(); return false; });

 .tabs ul li { display: inline-block; }.tabs li a { background: #937638; padding: 10px; color: #fff; display: inline-block; text-decoration: none; } table, td, th { border: 1px solid #ddd; text-align: left; } table { border-collapse: collapse; width: 100%; } th, td { padding: 15px; }

 <div id="tabs" class="tabs"> <ul> <li><a href="#4">4-Bedroom</a></li> <li><a href="#3">3-Bedroom</a></li> </ul> <div id="4"> <div id="tabs" class="tabs"> <ul> <li class=""><a href="#2021">2021</a></li> </ul> <div id="2021" class="2021"> <table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Fee</th> </tr> <tr> <td>Peter</td> <td>Griffin</td> <td>$100</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> <td>$150</td> </tr> <tr> <td>Joe</td> <td>Swanson</td> <td>$300</td> </tr> <tr> <td>Cleveland</td> <td>Brown</td> <td>$250</td> </tr> </table> </div> </div> </div> <div id="3"> <div id="tabs" class="tabs"> <ul> <li class=""><a href="#2021">2021</a></li> </ul> <div id="2021" class="2021"> <table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Savings</th> </tr> <tr> <td>Peter</td> <td>Griffin</td> <td>$100</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> <td>$150</td> </tr> </table> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

Answer 1

我認為這就是您正在尋找的嵌套標簽。

 $('.tabs ul li').click(function() { $('.tabs > ul > li.active').removeClass('active'); $(this).addClass('active'); const parent = $(this).closest('.tabs'); parent.find('.content').hide(); var activeTab = $(this).find('a').attr('href'); parent.find(activeTab).fadeIn(); return false; });

 .tabs ul li { display: inline-block; }.content { display: none; }.tabs li a { background: #937638; padding: 10px; color: #fff; display: inline-block; text-decoration: none; } table, td, th { border: 1px solid #ddd; text-align: left; } table { border-collapse: collapse; width: 100%; } th, td { padding: 15px; }

 <div id="tabs" class="tabs"> <ul> <li><a href="#4">4-Bedroom</a></li> <li><a href="#3">3-Bedroom</a></li> </ul> <div id="4" class="content"> <div id="tabs" class="tabs"> <ul> <li class=""><a href="#2021">2021</a></li> </ul> <div id="2021" class="2021 content"> <table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Fee</th> </tr> <tr> <td>Peter</td> <td>Griffin</td> <td>$100</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> <td>$150</td> </tr> <tr> <td>Joe</td> <td>Swanson</td> <td>$300</td> </tr> <tr> <td>Cleveland</td> <td>Brown</td> <td>$250</td> </tr> </table> </div> </div> </div> <div id="3" class="content"> <div id="tabs" class="tabs"> <ul> <li class=""><a href="#2021">2021</a></li> </ul> <div id="2021" class="2021 content"> <table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Savings</th> </tr> <tr> <td>Peter</td> <td>Griffin</td> <td>$100</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> <td>$150</td> </tr> </table> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>