Есть код навигационного бара со списком с ссылками ведущими на id
блока, и блоки с содержимым страниц. Как реализовать чтобы при нажатии на ссылку, элементу списка присваивался класс .active
, а у блока с id
на который ведет ссылка удалялся класс .hidden
при этом всем остальным блокам с классом .page
этот класс присваивался.
<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>