I can not understand. There are more than 10 blocks and 4 points navigation. Each block is assigned one of 4 groups. How to make it so that when you click on one of the navigation points - only those blocks that belong to this group would not change style, and the class would be added to all the others (for example, " disabled ")? When switching to another item, do other blocks remain, and the class has been added to all the others (" disabled ")?

Closed due to the fact that the essence of the question is not clear to the participants of HamSter , rjhdby , Kirill Stoianov , Denis , user207618 15 Oct '16 at 0:02 .

Try to write more detailed questions. To get an answer, explain what exactly you see the problem, how to reproduce it, what you want to get as a result, etc. Give an example that clearly demonstrates the problem. If the question can be reformulated according to the rules set out in the certificate , edit it .

  • Try to write the code yourself and give an example here if there are errors. I will give you a solution. Try to start the cycle of passage through all 10 blocks, for example, according to their class, making it unique. In each pass there is an IF and checks whether this class is equal to the selected group or not. If the equal is not added, otherwise we add the class to the list. Let me remind you that you can go through the classes using .each() , trigger class .toggleClass() , the rest is freely described on the Internet. - Telion
  • @Levelleor thanks, google - Atomrr

1 answer 1

In the example, only one block each, but it is done so as to work with many elements -

 let nav = document.querySelector( '#navbar' ); const nav_changeHandler = () => changeRoute( ); nav.addEventListener( 'change', nav_changeHandler ); function changeRoute( ){ let route = document.querySelector( `input[type=radio]:checked` ).dataset.rout; let prevRoutes = document.querySelectorAll( `[data-active="true"]` ); if( prevRoutes.length ){ hideRoute( prevRoutes ); } let currentRoute = document.querySelectorAll( `[data-route="${ route }"]` ); showRoute( currentRoute ); } function showRoute( routes ){ for( let route of routes ){ route.hidden = false; route.dataset.active = true; } } function hideRoute( routes ){ for( let route of routes ){ route.dataset.active = false; } } changeRoute(); 
 .navbar-horizontal { width: 100%; height: auto; pointer-events: none; } .nav > li { list-style: none; } .horizontal-list { position: absolute; margin: 0 auto; } .horizontal-list-item { float: left; } .nav-item { width: auto; height: 20px; padding: 5px 6px; position: relative; ext-align: center; } .router { width: 100%; height: 100%; position: fixed; top: 0; left: 0; } [data-route="bisque"] { width: 100%; height: 100%; background: bisque; } [data-route="mintcream"] { width: 100%; height: 100%; background: mintcream; } [data-route="aquamarine"] { width: 100%; height: 100%; background: aquamarine; } [data-route="burlywood"] { width: 100%; height: 100%; background: burlywood; } label { cursor: pointer; pointer-events: auto; } input[type="radio"]:checked + label { width: 100%; height: 100%; border-bottom: 2px solid #000; padding: 3px 0; } [data-active="false"] { display: none; } [data-active="true"] { display: block; } 
 <div class="router"> <div class="route" data-route="bisque" data-active="false"></div> <div class="route" data-route="mintcream" data-active="false"></div> <div class="route" data-route="aquamarine" data-active="false"></div> <div class="route" data-route="burlywood" data-active="false"></div> </div> <nav class="navbar navbar-horizontal" id="navbar"> <ul class="nav horizontal-list" id=navbar-nav> <li class="horizontal-list-item nav-item"> <input type="radio" id="nav-item_0" name="nav" data-rout="bisque" hidden checked> <label for="nav-item_0">bisque</label> </li> <li class="horizontal-list-item nav-item"> <input type="radio" id="nav-item_1" name="nav" data-rout="mintcream" hidden> <label for="nav-item_1">mintcream</label> </li> <li class="horizontal-list-item nav-item"> <input type="radio" id="nav-item_2" name="nav" data-rout="aquamarine" hidden> <label for="nav-item_2">aquamarine</label> </li> <li class="horizontal-list-item nav-item"> <input type="radio" id="nav-item_3" name="nav" data-rout="burlywood" hidden> <label for="nav-item_3">burlywood</label> </li> </ul> </nav>

  • Thank! What you need - Atomrr