jQuery選項卡-選擇所有菜單ul元素

Question

我是使用jQuery的新手，而我對靜態網站的第一個較大改進是jQuery選項卡，讓我在側邊欄和頂部欄菜單上切換主頁div。 我似乎無法讓腳本與每個nav類元素一起使用。 截至目前，它正在處理上述元素：Poradnik 1,2,3,4，我也希望他們在Stronagłówna，Spistreści，Poradniki和O autorze上工作。 基本上所有位於導航下的元素。 我應該改變什么？ 有人可以幫我嗎？ 謝謝。

下面，我將放置所需元素的代碼。

 $(document).ready(function(){ $('ul.nav ul li').click(function(){ var tab_id = $(this).attr('data-tab'); $('ul.nav ul li').removeClass('current'); $('.tab-content').removeClass('current'); $(this).addClass('current'); $("#"+tab_id).addClass('current'); }) }) 

 .tab-content{ display: none; padding: 15px; } .tab-content.current{ display: inherit; } .topmenu { width: 875px; display: block; position: relative; float: left; height: 90px; font-size: 20px; } .topmenu ul { padding: 25px; } .topmenu ul.nav a, ul.nav a:visited { display: block; width: 120px; height: 25px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; text-align: center; padding: 5px; } .topmenu ul.nav li a:hover { width: 120px; height: 25px; background: #D2E2FF; color: #000; border: 1px solid black; padding-top: 4px; padding-right: 4px; padding-bottom: 8px; padding-left: 4px; } .topmenu ul.nav li:hover ul { left: 0px; top: 38px; padding: 0px; border:solid 1px; } .topmenu ul.nav li:hover ul li a { padding: 6px; width: 250px; background-color: #FFFFFF; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-bottom-style: solid; border-top-color: #000; border-right-color: #000; border-bottom-color: #000; border-left-color: #000; border-right-style: none; border-left-style: none; } ul.nav { list-style: none; margin-bottom: 15px; } ul.nav li { float:left; } ul.nav a, ul.nav a:visited { display: block; width: 25px; height: 25px; text-decoration: none; background-color: #FFFFFF; padding: 3px; } ul.nav li a:hover { background-color: #D2E2FF; color: #000; border: solid 1px black; padding: 2px; } ul.nav ul a:hover { background-color: #D2E2FF; color: #000; padding: 3px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; } ul.nav li a:focus, ul.nav li a:active { color: #000; text-decoration: underline; } ul.nav ul { position: absolute; left: -9999px; top: -9999px; list-style-type: none; } ul.nav li:hover { position: relative; } ul.nav li:hover ul { left: 30px; top: 0px; padding: 0px; border: solid 1px; } ul.nav li:hover ul li a { padding: 3px; width:300px; background-color: #FFFFFF; } ul.nav li:hover ul li a:hover { background: #D2E2FF; color: #000; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="topmenu"> <ul class="nav"> <li class="tab-link current" data-tab="strona_glowna"><a href="#">Strona główna</a></li> <li class="tab-link" data-tab="spis_tresci"><a href="#">Spis treści</a></li> <li><a href="#">Poradniki</a> <ul> <li class="tab-link" data-tab="poradnik_1"><a href="#">Poradnik 1</a></li> <li class="tab-link" data-tab="poradnik_2"><a href="#">Poradnik 2</a></li> <li class="tab-link" data-tab="poradnik_3"><a href="#">Poradnik 3</a></li> <li class="tab-link" data-tab="poradnik_4"><a href="#">Poradnik 4</a></li> </ul> </li> <li class="tab-link" data-tab="o_autorze"><a href="#">O autorze</a></li> </ul> </div> <div id="strona_glowna" class="tab-content current"> <h1>Strona główna</h1> <p>Strona główna</p> </div> <div id="spis_tresci" class="tab-content"> <h1>Spis treści</h1> <p>Spis treści</p> </div> <div id="poradnik_1" class="tab-content"> <h1>Poradnik 1</h1> <p>Poradnik 1</p> </div> <div id="poradnik_2" class="tab-content"> <h1>Poradnik 2</h1> <p>Poradnik 2</p> </div> <div id="poradnik_3" class="tab-content"> <h1>Poradnik 3</h1> <p>Poradnik 3</p> </div> <div id="poradnik_4" class="tab-content"> <h1>Poradnik 4</h1> <p>Poradnik 4</p> </div> <div id="o_autorze" class="tab-content"> <h1>O autorze</h1> <p>O autorze</p> </div> 

Answer 1

選擇其他李，如下所示：

$(document).ready(function(){

    $('ul.nav li').click(function(){
        var tab_id = $(this).attr('data-tab');
        if(typeof(tab_id) != 'undefined'){  
            $('ul.nav li').removeClass('current');
            $('.tab-content').removeClass('current');

            $(this).addClass('current');
            $("#"+tab_id).addClass('current');
        }      
    })  
})

只需遵循HTML中的jquery選擇器鏈即可。

演示小提琴。 http://jsfiddle.net/6y7z1Lmq/1/

Answer 2

現在應該可以使用了。 問題是，當您單擊內部<li>之一時，您也單擊了外部 <li> 。 為了避免這種情況，請使用此JQuery / JavaScript函數：

$(document).ready(function() {
  $('ul.nav li:not(.innerNav)').click(function() {
    var tab_id = $(this).attr('data-tab');
    $('.ul.nav > li').removeClass('current');
    $('.tab-content').removeClass('current');
    $(this).addClass('current');
    $("#" + tab_id).addClass('current');
  });
});

並給<li> <ul>里面的<ul> ，類是innerNav 。

 $(document).ready(function() { $('ul.nav li:not(.innerNav)').click(function() { var tab_id = $(this).attr('data-tab'); $('.ul.nav > li').removeClass('current'); $('.tab-content').removeClass('current'); $(this).addClass('current'); $("#" + tab_id).addClass('current'); }); }); 

 .tab-content { display: none; padding: 15px; } .tab-content.current { display: inherit; } .topmenu { width: 875px; display: block; position: relative; float: left; height: 90px; font-size: 20px; } .topmenu ul { padding: 25px; } .topmenu ul.nav a, ul.nav a:visited { display: block; width: 120px; height: 25px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; text-align: center; padding: 5px; } .topmenu ul.nav li a:hover { width: 120px; height: 25px; background: #D2E2FF; color: #000; border: 1px solid black; padding-top: 4px; padding-right: 4px; padding-bottom: 8px; padding-left: 4px; } .topmenu ul.nav li:hover ul { left: 0px; top: 38px; padding: 0px; border: solid 1px; } .topmenu ul.nav li:hover ul li a { padding: 6px; width: 250px; background-color: #FFFFFF; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-bottom-style: solid; border-top-color: #000; border-right-color: #000; border-bottom-color: #000; border-left-color: #000; border-right-style: none; border-left-style: none; } ul.nav { list-style: none; margin-bottom: 15px; } ul.nav li { float: left; } ul.nav a, ul.nav a:visited { display: block; width: 25px; height: 25px; text-decoration: none; background-color: #FFFFFF; padding: 3px; } ul.nav li a:hover { background-color: #D2E2FF; color: #000; border: solid 1px black; padding: 2px; } ul.nav ul a:hover { background-color: #D2E2FF; color: #000; padding: 3px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; } ul.nav li a:focus, ul.nav li a:active { color: #000; text-decoration: underline; } ul.nav ul { position: absolute; left: -9999px; top: -9999px; list-style-type: none; } ul.nav li:hover { position: relative; } ul.nav li:hover ul { left: 30px; top: 0px; padding: 0px; border: solid 1px; } ul.nav li:hover ul li a { padding: 3px; width: 300px; background-color: #FFFFFF; } ul.nav li:hover ul li a:hover { background: #D2E2FF; color: #000; } 

 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <title></title> </head> <body> <div class="topmenu"> <ul class="nav"> <li class="tab-link current" data-tab="strona_glowna"> <a href="#">Strona główna</a> </li> <li class="tab-link" data-tab="spis_tresci"> <a href="#">Spis treści</a> </li> <li class="innerNav"> <a href="#">Poradniki</a> <ul> <li class="tab-link" data-tab="poradnik_1"> <a href="#">Poradnik 1</a> </li> <li class="tab-link" data-tab="poradnik_2"> <a href="#">Poradnik 2</a> </li> <li class="tab-link" data-tab="poradnik_3"> <a href="#">Poradnik 3</a> </li> <li class="tab-link" data-tab="poradnik_4"> <a href="#">Poradnik 4</a> </li> </ul> </li> <li class="tab-link" data-tab="o_autorze"> <a href="#">O autorze</a> </li> </ul> </div> <div class="tab-content current" id="strona_glowna"> <h1>Strona główna</h1> <p>Strona główna</p> </div> <div class="tab-content" id="spis_tresci"> <h1>Spis treści</h1> <p>Spis treści</p> </div> <div class="tab-content" id="poradnik_1"> <h1>Poradnik 1</h1> <p>Poradnik 1</p> </div> <div class="tab-content" id="poradnik_2"> <h1>Poradnik 2</h1> <p>Poradnik 2</p> </div> <div class="tab-content" id="poradnik_3"> <h1>Poradnik 3</h1> <p>Poradnik 3</p> </div> <div class="tab-content" id="poradnik_4"> <h1>Poradnik 4</h1> <p>Poradnik 4</p> </div> <div class="tab-content" id="o_autorze"> <h1>O autorze</h1> <p>O autorze</p> </div> </body> </html>