1

Как через скрипт сделать так, чтобы при нажатии на ссылку, добавлялся класс .active к элементам div в .left-side и .right-side, а также к самой ссылке.

Например: нажатие на .link1 - добавляет класс .active к a.link1 , .left-side .class-1 , .right-side .class-1

Пример кода: 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 ответа 2

2

Если нужно только добавлять класс по клику, то это можно сделать так:

$(".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");
});

А самим ссылкам добавить атрибут data-toggle:

<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>

Рабочий пример: https://jsfiddle.net/oyhcwk8q/

1

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');
});

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.