There is a code of a navigation bar with a list with links leading to the block id , and blocks with the contents of the pages. How to implement that when you click on a link, the element of the list was assigned a class .active , and for a block with an id to which the link leads, the class .hidden while all other blocks with the class .page this class.

 <div class="navbar"> <ul class="nav"> <li class="active"><a href="#home">Link</a></li> <li><a href="#page1">Link</a></li> <li><a href="#page2">Action</a></li> <li><a href="#page3">Another action</a></li> <li><a href="#page4">Something else here</a></li> </ul> </div> <div id="home" class="page"> страница с содСрТимым home </div> <div id="page1" class="page hidden"> страница с содСрТимым page1 </div> <div id="page2" class="page hidden"> страница с содСрТимым page2 </div> <div id="page3" class="page hidden"> страница с содСрТимым page3 </div> <div id="page4" class="page hidden"> страница с содСрТимым page4 </div>

    1 answer 1

    By clicking on the link, all <li> in .nav class .active , and add it to its parent.
    Then href links are taken and used as a selector to search for the corresponding block.
    The hidden class is added to all block pages, after which this class is removed from the selected block.

     $(document).ready(function() { var $pages = $('.page'); var $links = $('.nav li'); $('.nav a').on("click", function() { $links.removeClass("active"); $(this).parent().addClass("active"); var href = $(this).attr('href'); $pages.addClass("hidden"); $(href).removeClass("hidden"); }); }); 
     .active { background-color: gray; } .hidden { display: none; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="navbar"> <ul class="nav"> <li class="active"><a href="#home">Link</a></li> <li><a href="#page1">Link</a></li> <li><a href="#page2">Action</a></li> <li><a href="#page3">Another action</a></li> <li><a href="#page4">Something else here</a></li> </ul> </div> <div id="home" class="page"> страница с содСрТимым home </div> <div id="page1" class="page hidden"> страница с содСрТимым page1 </div> <div id="page2" class="page hidden"> страница с содСрТимым page2 </div> <div id="page3" class="page hidden"> страница с содСрТимым page3 </div> <div id="page4" class="page hidden"> страница с содСрТимым page4 </div>

    • you gradually all li will be active :-) - Grundy
    • @Grundy aha. And this is no accident: in the description of the author there is not a word about the removal of the active class from other <li> . So I did not care how it was written :) - Regent
    • But he has: to hide inactive, but now it turns out - li is active, and the div is hidden :) - Grundy
    • Yes, I completely forgot to say that the class .active is deleted from li. But in principle, it is not a problem, I will add it myself. And this is exactly what you need, thank you very much) - seledkapod
    • @seledkapod on health. I finalized the answer. If it suits you, do not forget to mark it as correct. - Regent