0

Есть два списка. При клике по одному из элементов в одном списке ему присваивается класс, а у других удаляется.

Как сделать, чтобы в соседнем списке, у соответствующего элемента тоже прикреплялся и удалялся этот класс. То есть, если в первом списке у (третьего например) элемента есть класс .active, то и и в другом у этого же элемента он появлялся. желательно чтобы проверка шла в обе стороны.

Ниже написал пример небольшого кода, только пока не понял как связать...

$(".sliderone li").click(function() {
  $(".sliderone li").removeClass("active");         
  $(this).addClass("active");
  if($(".sliderone li:eq("+el+")").hasClass('active')){
  $(".muther .child:eq("+el+")").addClass('active')
  }
})
li.active,
.child.active {
  background: #95FFCC;
  padding: 5px;
  border: 2px solid #2C9A00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul class="sliderone">
  <li>1</li>
  <li class="active">2</li>
  <li>3</li>
</ul>

<div class="nextclock">
  <div class="muther">
    <div class="child">11</div>
    <div class="child">22</div>
    <div class="child">33</div>
  </div>
</div>

Обратите внимание, что у одного из элементов этот класс уже стоит, то есть проверка наличия класса должна срабатывать не по клику, а сразу, независимо от того, кликнули или нет. Не ругайте за ошибки, просто пробую не знаю пока, как.

7
  • а почему бы не использовать сразу какой-нибудь компонент типа tab? :-)
    – Grundy
    1 мар 2016 в 6:48
  • не понял о чем вы. Знаю только что есть html код с двумя независимыми списками, которые я хочу связать
    – engenes
    1 мар 2016 в 6:52
  • выглядит как таб, когда есть список, по клику элементов которого показываются соответствующий контент
    – Grundy
    1 мар 2016 в 6:54
  • мне не нужен какой-либо контент или таб, просто есть два блока в одном список элементов, а в другом связанные с каждым элементом блоки. Эти два основных блока выводятся в разных частях странички (вообще в разных) Один в шапке другой где-то внизу справа. Нужно, чтобы когда у одного из элементов сверху есть класс active, то и в блоке снизу у соответствующего элемента этот класс был, чтобы они например подсвечивались одинаково, чтобы было видно что этот блок относится к этому элементу списка а этот к этому.
    – engenes
    1 мар 2016 в 7:04
  • Ага :-) вот именно табы и описали :-) можно еще это navbar назвать :-) вот например уже готовое getbootstrap.com/components/#nav
    – Grundy
    1 мар 2016 в 7:06

1 ответ 1

1

Если соответствие по порядковому номеру, то можно использовать функцию index

$(".sliderone li").click(function() {
  $(".sliderone .active,.muther .active").removeClass("active");
  $(".muther .child:eq(" + $(this).addClass("active").index() + ")").addClass('active')
});

$(".muther .child:eq(" + $(".sliderone .active").index() + ")").addClass('active')
li.active,
.child.active {
  background: #95FFCC;
  padding: 5px;
  border: 2px solid #2C9A00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul class="sliderone">
  <li>1</li>
  <li class="active">2</li>
  <li>3</li>
</ul>

<div class="nextclock">
  <div class="muther">
    <div class="child">11</div>
    <div class="child">22</div>
    <div class="child">33</div>
  </div>
</div>

5
  • вот посмотрите, сформулировал вопрос, не знаю насколько близок к решению, но почему-то при клике по третьему элементу все работает ru.stackoverflow.com/questions/498684/…
    – engenes
    1 мар 2016 в 13:03
  • ваш ответ тоже важен будет но реализую на другой странице. а вот как реализовать проверку класса, как только он изменится в первом списке - непонятно
    – engenes
    1 мар 2016 в 13:05
  • @ЕвгенийШевцов, я честно говоря не понимаю чем отличаются эти вопросы
    – Grundy
    1 мар 2016 в 13:05
  • не знаю как чат с вами снова открыть объяснению этот момент, почему думал что заработает
    – engenes
    1 мар 2016 в 13:07
  • @ЕвгенийШевцов, заходите в него по ссылке под вопросом
    – Grundy
    1 мар 2016 в 13:10

Ваш ответ

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

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