Как скрыть и показать контент под панелью ссылок?

Question

Как вы заставляете набор ссылок вести себя как кнопки, когда одна нажата, она отображает скрытый контент, а при нажатии другой скрывает предыдущий контент и показывает другой контент?По первой ссылке нужно щелкнуть по умолчанию, чтобы показать первый набор скрытого контента.

Вот моя скрипка: http://jsfiddle.net/sr1fqt4n/

Я попытался переключить видимость с помощью следующего скрипта:

<script type="text/javascript">
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
</script>

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

Желаемый результат будет выглядеть так же, как и в разделе 2 分 集 剧情: https://baike.baidu.com/item/%E6%9D%A5%E8%87%AA%E6%98%9F%E6%98%9F%E7%9A%84%E4%BD%A0/12029711

Answer 1

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

Вам нужно использовать свой собственный код? Или как то, что упоминает Aras, есть много доступных плагинов. Как в начальной загрузке, так и в jquery (и любой другой библиотеке) есть решения для панелей вкладок.

И тег <a> используется для определения гиперссылки. Тег <button> или <div> может быть более подходящим.

Но если вам нужно ванильное решение JS, вот ручка с кодом, который устанавливает значение по умолчанию. По сути, вам нужен цикл for для управления переключением. https://codepen.io/Ghandour/pen/LjpXPx?editors=1010

  for (i = 0; i < tabButton.length; i++) {
    tabContent[i].style.display = 'none';
    tabButton[i].classList.remove('active');
}

Буду рад объяснить, есть ли какие-либо вопросы по коду.

Answer 2

Вам нужно сделать несколько вкладок, нет необходимости использовать тег <a>, в этой ситуации вы можете легко использовать такой плагин, как этот

, но если вы настаиваете на кодировании своего пути, попробуйте css active class в качестве флага, для какой вкладки и контента вы хотите быть видимым