Я новичок в JS (уровень 0.1), и у меня есть проблема с моим сценарием.

На моей странице практики есть только 1 страница, но 2 меню, и мне нужно, чтобы при нажатии на меню этот щелчок передавал класс .active другой кнопке брата (от 1A до 1B и т. Д.). И я не знаю, как это сделать.

Мой сценарий хорошо работает с одним меню за раз , но не применяет класс .active ко второму меню.

ПОСМОТРЕТЬ ДЕМО-ЖИТЬ (Codepen)

Что я делаю неправильно...?

Заранее спасибо!

//---------------- 

$(document).ready(function(){
  $('#cont-menu .menu').click(function(){
    $('.menu').removeClass("active");
    $(this).addClass("active");
});
});
body{text-align:center;font-family:Arial,sans-serif}.code{background:#d9d9d9;padding:2px 5px}#cont-menu span{line-height:1.75}#cont-menu{position:relative;width:500px;margin:0 auto;top:5px}#menu-1,#menu-2{width:150px;display:inline-block;vertical-align:top;margin:0 20px}.menu{padding:10px 20px 10px 10px;margin:0 0 3px 0;color:#fff;text-align:left;background:#999;cursor:pointer}.menu:hover{background:red}

.active{background:red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div id="cont-menu">
    <div id="menu-1">
      <div class="menu active">Buton 1-A</div>
      <div class="menu">Buton 2-A</div>
      <div class="menu">Buton 3-A</div>
      <div class="menu">Buton 4-A</div>
      <div class="menu">Buton 5-A</div>
    </div>

    <div id="menu-2">
      <div class="menu active">Buton 1-B</div>
      <div class="menu">Buton 2-B</div>
      <div class="menu">Buton 3-B</div>
      <div class="menu">Buton 4-B</div>
      <div class="menu">Buton 5-B</div>
    </div>
  <br><br>
<span>How to change the script so that when you click on the Menu on the left pass the <span class="code">.active</span> class also on the right, so that both buttons.<br>( 1A &rarr; 1B ... 2A &rarr; 2B ... 3A &rarr; 3B )<br>and vice versa, of course, are active at the same time...?</span>
</div>
javascript jquery menu
1
Pablo_Web 2 Май 2019 в 18:55

6 ответов

Лучший ответ
$(document).ready(function(){
  $('#cont-menu .menu').click(function(){
    $('.menu').removeClass('active');
    //Get the element from each list which matches the position of the clicked element
    $('#menu-1').children().eq($(this).index()).addClass('active');
    $('#menu-2').children().eq($(this).index()).addClass('active');
  });
});

Демо

2
wormania 2 Май 2019 в 16:18

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

В комментариях к этой демонстрации предполагается, что вы выбираете Buton 3 в первом меню. Код будет:

  1. Пройдите по дереву DOM от нажатой кнопки, чтобы найти ближайшую оболочку (обратите внимание, что я добавил класс в обе оболочки кнопок, чтобы сделать это проще) , и захватите его идентификатор.

  2. Разделите идентификатор на дефис, затем возьмите правое значение (1 или 2)

  3. Используйте троичный оператор, чтобы получить другой номер (то есть, если это меню 1, nxt_mnu равно 2 и т. Д.)

  4. Получить текст этой кнопки

  5. Аналогично (2) выше, используйте split(), чтобы получить только текст перед -A или -B

  6. Удалить класс .active из всех кнопок во всех меню

  7. Добавьте класс .active к нажатой кнопке

  8. (a) Выберите следующее меню, (b) найдите кнопку с текстом, содержащим тот же текст, что и нажатая кнопка, (c) Добавьте активный класс к этой сестринской кнопке

DEMO :

$(document).ready(function(){
   $('#cont-menu .menu').click(function(){
   debugger;
      let mnu_num = $(this).closest('.menu-wrapper').attr('id');
      mnu_num = mnu_num.split('-')[1]; //menu-1
      let nxt_mnu = (mnu_num == 1) ? '2' : '1'; //2
      let btn_txt = $(this).text(); //Buton 3-A
      btn_txt = btn_txt.split('-')[0] //eg. Buton 3
      $('.menu').removeClass("active");
      $(this).addClass("active");
      $('#menu-' + nxt_mnu).find('.menu:contains(' +btn_txt+ ')').addClass('active');
   });
});
body{text-align:center;font-family:Arial,sans-serif}.code{background:#d9d9d9;padding:2px 5px}#cont-menu span{line-height:1.75}#cont-menu{position:relative;width:500px;margin:0 auto;top:5px}#menu-1,#menu-2{width:150px;display:inline-block;vertical-align:top;margin:0 20px}.menu{padding:10px 20px 10px 10px;margin:0 0 3px 0;color:#fff;text-align:left;background:#999;cursor:pointer}.menu:hover{background:red}

.active{background:red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div id="cont-menu">
    <div id="menu-1" class="menu-wrapper">
      <div class="menu active">Buton 1-A</div>
      <div class="menu">Buton 2-A</div>
      <div class="menu">Buton 3-A</div>
      <div class="menu">Buton 4-A</div>
      <div class="menu">Buton 5-A</div>
    </div>

    <div id="menu-2" class="menu-wrapper">
      <div class="menu active">Buton 1-B</div>
      <div class="menu">Buton 2-B</div>
      <div class="menu">Buton 3-B</div>
      <div class="menu">Buton 4-B</div>
      <div class="menu">Buton 5-B</div>
    </div>
  <br><br>
<span>How to change the script so that when you click on the Menu on the left pass the <span class="code">.active</span> class also on the right, so that both buttons.<br>( 1A &rarr; 1B ... 2A &rarr; 2B ... 3A &rarr; 3B )<br>and vice versa, of course, are active at the same time...?</span>
</div>
1
cssyphus 2 Май 2019 в 16:28

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

$(document).ready(function(){
  $('#cont-menu .menu').click(function(){
    //get the value of the data-menu-class attribute
    var menuClass = $(this).data('menu-class');
    //remove all previous active classes
    $('.menu').removeClass("active");
    //add active to each menu (1&2)
    $('#menu-1 .menu'+menuClass).addClass('active');
    $('#menu-2 .menu'+menuClass).addClass('active');
});
});
body{text-align:center;font-family:Arial,sans-serif}.code{background:#d9d9d9;padding:2px 5px}#cont-menu span{line-height:1.75}#cont-menu{position:relative;width:500px;margin:0 auto;top:5px}#menu-1,#menu-2{width:150px;display:inline-block;vertical-align:top;margin:0 20px}.menu{padding:10px 20px 10px 10px;margin:0 0 3px 0;color:#fff;text-align:left;background:#999;cursor:pointer}.menu:hover{background:red}

.active{background:red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div id="cont-menu">
    <div id="menu-1">
      <div class="menu menu1 active" data-menu-class='1'>Buton 1-A</div>
      <div class="menu menu2" data-menu-class='2'>Buton 2-A</div>
      <div class="menu menu3" data-menu-class='3'>Buton 3-A</div>
      <div class="menu menu4" data-menu-class='4'>Buton 4-A</div>
      <div class="menu menu5" data-menu-classx='5'>Buton 5-A</div>
    </div>

    <div id="menu-2">
      <div class="menu menu1 active" data-menu-class='1'>Buton 1-B</div>
      <div class="menu menu2" data-menu-class='2'>Buton 2-B</div>
      <div class="menu menu3" data-menu-class='3'>Buton 3-B</div>
      <div class="menu menu4" data-menu-class='4'>Buton 4-B</div>
      <div class="menu menu5" data-menu-class='5'>Buton 5-B</div>
    </div>
</div>
1
aCMoFoCord 2 Май 2019 в 16:21

В настоящее время вы только добавляете класс .active к нажатой кнопке, если мы добавим идентификатор для каждой кнопки (имя), мы сможем достичь того, о чем вы просите.

Пытаться:

$(`[name=${$(this).attr('name')}]`).addClass("active");

$(document).ready(function() {
  $('#cont-menu .menu').click(function() {
    $('.menu').removeClass("active");
    $(`[name=${$(this).attr('name')}]`).addClass("active");
  });
});
body {
  text-align: center;
  font-family: Arial, sans-serif
}

.code {
  background: #d9d9d9;
  padding: 2px 5px
}

#cont-menu span {
  line-height: 1.75
}

#cont-menu {
  position: relative;
  width: 500px;
  margin: 0 auto;
  top: 5px
}

#menu-1,
#menu-2 {
  width: 150px;
  display: inline-block;
  vertical-align: top;
  margin: 0 20px
}

.menu {
  padding: 10px 20px 10px 10px;
  margin: 0 0 3px 0;
  color: #fff;
  text-align: left;
  background: #999;
  cursor: pointer
}

.menu:hover {
  background: red
}

.active {
  background: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cont-menu">
  <div id="menu-1">
    <div class="menu active" name="button1">Buton 1-A</div>
    <div class="menu" name="button2">Buton 2-A</div>
    <div class="menu" name="button3">Buton 3-A</div>
    <div class="menu" name="button4">Buton 4-A</div>
    <div class="menu" name="button5">Buton 5-A</div>
  </div>

  <div id="menu-2">
    <div class="menu active" name="button1">Buton 1-B</div>
    <div class="menu" name="button2">Buton 2-B</div>
    <div class="menu" name="button3">Buton 3-B</div>
    <div class="menu" name="button4">Buton 4-B</div>
    <div class="menu" name="button5">Buton 5-B</div>
  </div>
  <br><br>
</div>
1
John 2 Май 2019 в 16:16

Если кнопки просто связаны их позицией в меню, мы можем получить эту позицию, а затем выбрать все элементы в одной и той же позиции в каждом меню (через :nth-child селектор). Чтобы упростить задачу, мы добавляем класс в каждое меню.

$(document).ready(function(){
  $('#cont-menu .menu').click(function(){
    var index = $(this).index() + 1;
    $('.menu').removeClass("active");
    $('.menu-container :nth-child('+index+')').addClass("active");
});
});
body{text-align:center;font-family:Arial,sans-serif}.code{background:#d9d9d9;padding:2px 5px}#cont-menu span{line-height:1.75}#cont-menu{position:relative;width:500px;margin:0 auto;top:5px}#menu-1,#menu-2{width:150px;display:inline-block;vertical-align:top;margin:0 20px}.menu{padding:10px 20px 10px 10px;margin:0 0 3px 0;color:#fff;text-align:left;background:#999;cursor:pointer}.menu:hover{background:red}

.active{background:red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div id="cont-menu">
    <div class="menu-container">
      <div class="menu active">Buton 1-A</div>
      <div class="menu">Buton 2-A</div>
      <div class="menu">Buton 3-A</div>
      <div class="menu">Buton 4-A</div>
      <div class="menu">Buton 5-A</div>
    </div>

    <div class="menu-container">
      <div class="menu active">Buton 1-B</div>
      <div class="menu">Buton 2-B</div>
      <div class="menu">Buton 3-B</div>
      <div class="menu">Buton 4-B</div>
      <div class="menu">Buton 5-B</div>
    </div>
  <br><br>
<span>How to change the script so that when you click on the Menu on the left pass the <span class="code">.active</span> class also on the right, so that both buttons.<br>( 1A &rarr; 1B ... 2A &rarr; 2B ... 3A &rarr; 3B )<br>and vice versa, of course, are active at the same time...?</span>
</div>
2
Felix Kling 2 Май 2019 в 16:26

Здесь я использую атрибут data с селектором атрибута css, чтобы получить тот же элемент в группе. И чтобы получить то же поведение с эффектом наведения, я использую js для управления им вместо css.

$(document).ready(function() {
  $('#cont-menu').on('click', '.menu', function(e) {
    $('.menu').removeClass('active');
    $(`[data-group=${this.dataset.group}]`).addClass("active");
  });

  $('#cont-menu').on('mouseenter', '.menu', function(e) {
    $('.menu').removeClass('hover');
    $(`[data-group=${this.dataset.group}]`).addClass('hover')

  });
});
body {
  text-align: center;
  font-family: Arial, sans-serif
}

.code {
  background: #d9d9d9;
  padding: 2px 5px
}

#cont-menu span {
  line-height: 1.75
}

#cont-menu {
  position: relative;
  width: 500px;
  margin: 0 auto;
  top: 5px
}

#menu-1,
#menu-2 {
  width: 150px;
  display: inline-block;
  vertical-align: top;
  margin: 0 20px
}

.menu {
  padding: 10px 20px 10px 10px;
  margin: 0 0 3px 0;
  color: #fff;
  text-align: left;
  background: #999;
  cursor: pointer
}

.menu.hover {
  background: red;
}

.active {
  background: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div id="cont-menu">
  <div id="menu-1">
    <div data-group="a" class="menu active">Buton 1-A</div>
    <div data-group="b" class="menu">Buton 2-A</div>
    <div data-group="c" class="menu">Buton 3-A</div>
    <div data-group="d" class="menu">Buton 4-A</div>
    <div data-group="e" class="menu">Buton 5-A</div>
  </div>

  <div id="menu-2">
    <div data-group="a" class="menu active">Buton 1-B</div>
    <div data-group="b" class="menu">Buton 2-B</div>
    <div data-group="c" class="menu">Buton 3-B</div>
    <div data-group="d" class="menu">Buton 4-B</div>
    <div data-group="e" class="menu">Buton 5-B</div>
  </div>
  <br><br>
  <span>How to change the script so that when you click on the Menu on the left pass the <span class="code">.active</span> class also on the right, so that both buttons.<br>( 1A &rarr; 1B ... 2A &rarr; 2B ... 3A &rarr; 3B )<br>and backwards, of course,
  are active at the same time...?</span>
</div>
1
Jacob 2 Май 2019 в 16:32

Похожие вопросы

29 Как удалить свойство из объекта JavaScript?
29 Как вы получаете метку времени в JavaScript?
31 Как перенаправить на другую веб-страницу?
17 Как вставить элемент в массив по определенному индексу (JavaScript)?
29 Как включить файл JavaScript в другой файл JavaScript?
29 Как я могу удалить конкретный элемент из массива?
24 Как мне вернуть ответ от асинхронного вызова?
💵 Получи $100 на хостинг на 60 дней.
Регистрируйся!

Новые вопросы

4 как отобразить определенный элемент один раз в jsx с помощью карты?
2 Изменение поведения <input type= color> с одиночного щелчка на двойной щелчок
1 Как установить данную строку var в качестве имен столбцов и данных, используя DataTable в Javascript
2 Как получить только последнюю строку из ячеек в одном столбце
2 Удалите ненужные namekeys из ответа json
3 Как отправить данные между двумя разными портами в одном приложении
3 Как сопоставить определенные строки в массиве с помощью javascript?
2 Фавикон React.js не меняется
3 Какое условие должно быть применено к дочернему компоненту для условного рендеринга
2 Angular, как проверить, из какого компонента находится div
Все вопросы по теме javascript >

javascript

По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.

Подробнее про javascript...