How to make it so that when a link is clicked, the class .active added to the div elements in .left-side and .right-side , as well as to the link itself.

For example: clicking on .link1 adds the class .active to a.link1 , .left-side .class-1 , .right-side .class-1

Example code: https://jsfiddle.net/qbn8f077/

 <div class="left-side" > <nav> <ul class="menu"> <li class="link1"><a href="">link1</a> </li> <li class="link2"><a href="">link2</a> </li> <li class="link3"><a href="">link3</a> </li> <li class="link4"><a href="">link4</a> </li> </ul> </nav> <div class="class-1" > </div> <div class="class-2" > </div> <div class="class-3" > </div> <div class="class-4" > </div> </div> <div class="right-side"> <div class="class-1"> </div> <div class="class-2"> </div> <div class="class-3"> </div> <div class="class-4"> </div> </div>

    2 answers 2

    Pure js

     var d = document, links = [].slice.call(d.querySelectorAll('.menu a')), group1 = [].slice.call(d.querySelectorAll('.left-side div[class^="class-"]')), group2 = [].slice.call(d.querySelectorAll('.right-side div[class^="class-"]')); links.forEach(function(el){ el.addEventListener('click', function(e){ e.preventDefault(); var indx = links.indexOf(this); removeClass(links, group1, group2); addClass(this, group1[indx], group2[indx]); },false); }); function removeClass() { for(var i = 0; i < arguments.length; i++) { arguments[i].forEach(function(el) { el.classList.remove('active'); }); } } function addClass() { for(var i = 0; i < arguments.length; i++) { arguments[i].classList.add('active'); } }

    jQuery

     var links = $('.menu a'), group1 = $('.left-side div[class^="class-"]'), group2 = $('.right-side div[class^="class-"]'); links.on('click', function(e) { e.preventDefault(); var $that = $(this), indx = $(this).index('.menu a'); links.add(group1).add(group2).removeClass('active'); $that .add(group1.eq(indx)) .add(group2.eq(indx)) .addClass('active'); });

      If you only need to add a class by clicking, you can do it like this:

       $(".menu a").click(function(){ $(this).addClass("active"); $(".left-side .class-" + $(this).attr("data-toggle")).addClass("active"); $(".right-side .class-" + $(this).attr("data-toggle")).addClass("active"); });

      And add the data-toggle attribute to the links themselves:

       <ul class="menu"> <li class="link1"><a href="#" data-toggle="1">link1</a> </li> <li class="link2"><a href="#" data-toggle="2">link2</a> </li> <li class="link3"><a href="#" data-toggle="3">link3</a> </li> <li class="link4"><a href="#" data-toggle="4">link4</a> </li> </ul>

      Working example: https://jsfiddle.net/oyhcwk8q/