Можем ли мы использовать одну и ту же кнопку, чтобы скрыть / показать несколько div?

У меня есть 3 кнопки тегов привязки и 6 div, я хочу назначить по 2 div для каждой кнопки, и при нажатии оба назначенных div должны отображаться / скрываться соответственно.

Мне удалось скрыть / показать первые 3 div, используя приведенный ниже код, однако для следующих 3 div (раздел изображения) мой код не работает

html:

//button section
 <div class = "row">
   <div class = "col-4 col-sm-2 col-lg-2">
      <div class = "mx-2"><a id = "me" class = "trans-btn selected" onclick = "show('id1');">Widget</a></div>
      <div class = "mx-2"><a id = "me" class = "trans-btn" onclick = "show('id2');">Widget</a></div>
      <div class = "mx-2"><a id = "me" class = "trans-btn" onclick = "show('id3');">Widget</a></div>
   </div>
//1st 3 divs
   <div class = "col-8 col-sm-5 col-lg-5">
      <div class = "mx-2" id = "id1">
         <h3>Tabs with soft transitioning effect.</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra 
            justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque 
            penatibus et magnis dis parturient montes.
         </p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet.
         </p>
         <a class = "btn-warning" href = "">Download</a>
      </div>
      <div class = "mx-2" id = "id2" style = "display:none;">
         <h3>Tabs Different effect.</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra 
            justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque 
            penatibus et magnis dis parturient montes.
         </p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet.
         </p>
         <a class = "btn-warning" href = "">Download</a>
      </div>
      <div class = "mx-2" id = "id3" style = "display:none;">
         <h3>Tabs most of effect.</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra 
            justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque 
            penatibus et magnis dis parturient montes.
         </p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet.
         </p>
         <a class = "btn-warning" href = "">Download</a>
      </div>
   </div>

//next 3 divs(image section)
   <div class = "col-12 col-sm-5 col-lg-5 last-sec">
      <div class = "mx-2" id = "id1"><img class = "img-fluid" src = "assets/images/shadow-img.png"/></div>
      <div class = "mx-2" id = "id2" style = "display:none;"><img class = "img-fluid" src = "assets/images/shadow-img.png"/></div>
      <div class = "mx-2" id = "id3" style = "display:none;"><img class = "img-fluid" src = "assets/images/shadow-img.png"/></div>
   </div>
</div>

js:

function show(elementId) { 
    document.getElementById("id1").style.display = "none";
    document.getElementById("id2").style.display = "none";
    document.getElementById("id3").style.display = "none";
    document.getElementById(elementId).style.display = "block";
}

Любой альтернативный метод отображения / скрытия обоих div при нажатии назначенной кнопки?

Вы должны использовать общие имена class для всех скрытых / отображаемых div, и jquery toggle сделает это в соответствии с вашими требованиями.

— 30.12.2018 13:45

У вас есть повторяющиеся идентификаторы повсюду, например <div class = "mx-2" id = "id1"> и другие - идентификатор должен быть уникальным

— 30.12.2018 13:47

javascript css function display

30.12.2018 13:40

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Вам следует подумать о включении jQuery в свой проект. jQuery уже предоставляет эту функцию.

Добавьте этот код в свой HTML-тег:

<head>
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

И тогда вы сможете использовать в этом случае следующие функции - функцию переключения, в которой вы можете переключать классы ваших указанных элементов:

$( "#id1, #id2, #id3" ).toggle(
  function() {
    $( this ).addClass( "show" );
  }, function() {
    $( this ).removeClass( "hide" );
  }
);

См. Документацию jquery для событий переключения и щелчка:

https://api.jquery.com/toggle-event/

https://api.jquery.com/click/

и, в общем, документация jQuery, чтобы найти другие аналогичные функции:

https://api.jquery.com

Если вы добавите начальную загрузку в свой проект, классы show и hide уже будут включены в ваш проект ... и обеспечат желаемую функциональность.

Надеюсь, это поможет.

Да, но как насчет повторяющихся идентификаторов в исходном коде? Не уверен, что это сработает, и это определенно недействительный HTML

— 30.12.2018 13:48

@AlonEitan вам нужно будет изменить идентификаторы на классы

— 30.12.2018 13:50

Ну, это не мой вопрос, но я думаю, что любой ответ на этот вопрос должен сказать что-то о проблеме с дублированными идентификаторами и предложить альтернативный и ДЕЙСТВИТЕЛЬНЫЙ (с точки зрения HTML) способ ее решения: «Я был способный, чтобы скрыть / показать 1-й 3 divs, используя приведенный ниже код, однако для следующие 3 див. (раздел изображения) мой код - нет работает»

— 30.12.2018 13:53

@Alon спасибо за вашу помощь, теперь я удалил повторяющиеся идентификаторы из моего кода и могу получить результат.

— 31.12.2018 05:06

30.12.2018 13:46

вы можете использовать метод .querySelectorAll и скрыть все эти элементы

function show(elementId) { 
    [].slice.call(document.querySelectorAll(".myBlock"),0).map(e=>e.style.display = "none")
    document.getElementById(elementId).style.display = "block";
}

//button section
 <div class = "row">
   <div class = "col-4 col-sm-2 col-lg-2">
      <div class = "mx-2"><a id = "me1" class = "trans-btn selected" onclick = "show('id1');">Widget</a></div>
      <div class = "mx-2"><a id = "me2" class = "trans-btn" onclick = "show('id2');">Widget</a></div>
      <div class = "mx-2"><a id = "me3" class = "trans-btn" onclick = "show('id3');">Widget</a></div>
   </div>
//1st 3 divs
   <div class = "col-8 col-sm-5 col-lg-5">
      <div class = "mx-2 myBlock" id = "id1">
         <h3>Tabs with soft transitioning effect.</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra 
            justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque 
            penatibus et magnis dis parturient montes.
         </p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet.
         </p>
         <a class = "btn-warning" href = "">Download</a>
      </div>
      <div class = "mx-2 myBlock" id = "id2" style = "display:none;">
         <h3>Tabs Different effect.</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra 
            justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque 
            penatibus et magnis dis parturient montes.
         </p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet.
         </p>
         <a class = "btn-warning" href = "">Download</a>
      </div>
      <div class = "mx-2 myBlock" id = "id3" style = "display:none;">
         <h3>Tabs most of effect.</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra 
            justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque 
            penatibus et magnis dis parturient montes.
         </p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet.
         </p>
         <a class = "btn-warning" href = "">Download</a>
      </div>
   </div>

//next 3 divs(image section)
   <div class = "col-12 col-sm-5 col-lg-5 last-sec">
      <div class = "mx-2" id = "id1"><img class = "img-fluid" src = "assets/images/shadow-img.png"/></div>
      <div class = "mx-2" id = "id2" style = "display:none;"><img class = "img-fluid" src = "assets/images/shadow-img.png"/></div>
      <div class = "mx-2" id = "id3" style = "display:none;"><img class = "img-fluid" src = "assets/images/shadow-img.png"/></div>
   </div>
</div>

30.12.2018 13:51

Ответ принят как подходящий

Вы используете один и тот же id дважды. Это не разрешено. Я изменил ваш HTML, чтобы исправить эту проблему. Надеюсь, это поможет.

function show(elementId) { 
   let divs = Array.from(document.querySelectorAll("[id ^= 'did']"));
   let imgs = Array.from(document.querySelectorAll("[id ^= 'iid']"));
   divs.forEach(d=>{d.style.display = "none"})
   imgs.forEach(i=>{i.style.display = "none"})
   document.getElementById("d"+elementId).style.display = "block";
   document.getElementById("i"+elementId).style.display = "block";
    }

<div class = "row">
   <div class = "col-4 col-sm-2 col-lg-2">
      <div class = "mx-2"><a id = "me" class = "trans-btn selected" onclick = "show('id1');">Widget1</a></div>
      <div class = "mx-2"><a id = "me" class = "trans-btn" onclick = "show('id2');">Widget2</a></div>
      <div class = "mx-2"><a id = "me" class = "trans-btn" onclick = "show('id3');">Widget3</a></div>
   </div>
<!--1st 3 divs-->
   <div class = "col-8 col-sm-5 col-lg-5">
      <div class = "mx-2" id = "did1">
         <h3>Tabs with soft transitioning effect.</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra 
            justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque 
            penatibus et magnis dis parturient montes.
         </p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet.
         </p>
         <a class = "btn-warning" href = "">Download</a>
      </div>
      <div class = "mx-2" id = "did2" style = "display:none;">
         <h3>Tabs Different effect.</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra 
            justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque 
            penatibus et magnis dis parturient montes.
         </p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet.
         </p>
         <a class = "btn-warning" href = "">Download</a>
      </div>
      <div class = "mx-2" id = "did3" style = "display:none;">
         <h3>Tabs most of effect.</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra 
            justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque 
            penatibus et magnis dis parturient montes.
         </p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet.
         </p>
         <a class = "btn-warning" href = "">Download</a>
      </div>
   </div>

<!--next 3 divs(image section)-->
   <div class = "col-12 col-sm-5 col-lg-5 last-sec">
      <div class = "mx-2" id = "iid1"><img class = "img-fluid" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/pin.png"/></div>
      <div class = "mx-2" id = "iid2" style = "display:none;"><img class = "img-fluid" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/cat.svg#blackcat"/></div>
      <div class = "mx-2" id = "iid3" style = "display:none;"><img class = "img-fluid" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/cat.svg#redcat"/></div>
   </div>
</div>

30.12.2018 13:58

Поскольку document.getElementById() предоставит вам первый согласованный элемент, вы измените стиль только первого согласованного элемента, а не второго.

Вы можете рассмотреть возможность изменения атрибута id с помощью класса, поскольку атрибут id должен быть уникальным.

// remove the id attribute if it's not used in other places
// class-replacement-for-id1 here is just a placeholder, it can be anything you want
<div class = "mx-2 class-replacement-for-id1" id = "id1">

<div class = "mx-2 class-replacement-for-id1" id = "id1">
    <img class = "img-fluid" src = "assets/images/shadow-img.png"/>
</div>

Затем используйте document.querySelectorAll('.class-replacement-for-id1') для выбора элементов.

function toggleDisplay(className) { 
    var elements = document.querySelectorAll('.' + className);

    for (var i = 0; i < elements.length; i++) {
        elements[i].style.display = elements[i].style.display === 'none' ? 'block' : 'none';
    }
}

30.12.2018 14:03

Другие вопросы по теме

Впоследствии на Flexbox влияет маржа

Расширенные обертки в CSS

Как мне центрировать средний текст гибкого контейнера?

Почему нельзя установить ширину и высоту дочернего элемента такими же, как у родительского?

Попытка заставить макет страницы работать с тестами Google для мобильных устройств

Белый цвет icon.png в синий цвет icon.png (html / css)

Как исправить всплывающее окно, которое автоматически закрывается после открытия и обновления моей страницы?

Центрирование фиксированной кнопки внутри div

Динамическое добавление строки в таблицу

Как выбрать дочерний элемент, который является соседом с: hover

Можем ли мы использовать одну и ту же кнопку, чтобы скрыть / показать несколько div?

Ответы 4

Другие вопросы по теме

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