jQuery选项卡-选择所有菜单ul元素

Question

I'm new to using jQuery and my first bigger improvement to static website is a jQuery tabs which let's me switch main page divs on sidebar and topbar menus. I can't seem to get the script to work with every nav class element. As of right now it's working on said elements: Poradnik 1,2,3,4 and I'd also want them to work on Strona główna, Spis treści, Poradniki and O autorze. Basically all elements that are located under nav. What should I change? Could anyone help me out with it? Thank you.

Below I'll put the code for the required elements.

 $(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

select other li like following:

$(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');
        }      
    })  
})

simply follow the chain in your HTML for jquery selectors.

demo fiddle. http://jsfiddle.net/6y7z1Lmq/1/

Answer 2

This should work now. The problem is that when you click on one of the inner <li> 's, you are also clicking on one of the outer <li> 's. To avoid this, use this JQuery/JavaScript function:

$(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');
  });
});

and give the <li> with the <ul> inside, the class 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>