I'm not sure that this is the right name. The task is this: you need to sort the contents when you click on the menu buttons.

<ul class="mnu-our-work"> <li><a href="#">All</a></li> <li><a href=".branding">Branding</a></li> <li><a href=".design">Design</a></li> <li><a href=".development">Development</a></li> <li><a href=".strategy">Strategy</a></li> </ul> <div class="all-elem"> <div class="all-work design"> ... </div> <div class="all-work strategy"> ... </div> <div class="all-work development"> ... </div> //их к примеру 9 разных div </div>

That is, when you click Design. all other divas must become invisible.

  • First of all I would like to say that you have most of the divs that are not closed, more precisely, after the description of each is not>, now you have these: <div, but <div> is Legionary
  • all by shut up. but that was not the problem. I wrote this example in a hurry. In the original, everything is fine - mars

1 answer 1

If you take your markup as a basis, you can do something like this: (with jquery connected)

 $(function () { var allWorkBlock = $('.all-work') $('.mnu-our-work a').click(function (ev) { ev.preventDefault(); var selector = $(this).attr('href'); // Но лучше бы там поставить звездочку. if (selector == '#') { allWorkBlock.show(); } else { allWorkBlock.filter(':not(' + selector + ')').hide(); allWorkBlock.filter(selector).show(); } }); })

Example: https://jsfiddle.net/2vvzzzry/

  • Chuvi, thank you so much. 2 days tormented in search of the necessary information !!! - mars