Орагнизация переключаемых вкладок на JS?

Question

[toyvo_glumov]

Мои познания в JS очень скудны, но понадобилось сделать на страничке контнент, который появляется или исчезает при клике на соответствующую вкладку. В сети много примеров как это сделать с минимум кода, но мне в качестве практики срельнуло сделать так, как я это понимаю и если честно, так как там показано было с переборами и условиями мне пока не очень поятно.
В общем, тут вроде работает, но насколько жизнеспособен такой метод за пределами песочницы?
https://codepen.io/anon/pen/awzxJV

Comments

[Александр Лысенко]

Ну это плохо. Конечно же будет лучше если вы сократите код и используете более рациональный вариант. С другой стороны если вы не хотите разбираться и учиться, а ваш костыль будет работать под капотом, не вызывать нареканий, а вас это устроит — кому какое дело?

Answer 1

[Negwereth]

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

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

Привязывайтесь к определённым именам css-классов, а не к id.

Почитайте, что такое classList.

А после этого поищите чистое CSS-решение этой задачи. Оно есть.

Comments

[toyvo_glumov]

>Вы привязываетесь к конкретному случаю разметки, к конкретным элементам и их количеству.
ну тогдп на это можно скидку сделать, потому, что это нужно будет только в одном конкретном месте и нигде больше.
>В первую очередь посмотрите в сторону работы с массивами, коллекциями, как навешивать листенеры для большого количества элементов.
да, посмотрел пару мануалов на ютубе, но -сложна [тм], дf и не уже ли браузер распухнет от трех фунцций вместо одной.
>Привязывайтесь к определённым именам css-классов, а не к id.
везде пишут, что классы для стилей, а айди для скриптов ибо точнее, теперь наоборот?
>Почитайте, что такое classList.
classlist.add не хотел работать в ie11, хотя должен, не знаю
>чистое CSS-решение этой задачи. Оно есть.
смотрел у зоракса, мне все это показалось еще более костыльно почему-то. Тексты накладаваются друг на друга пока слиль не применишь.

[Negwereth]

toyvo_glumov: если уж взялись, то старайтесь использовать лучшие техники.

1. Не делайте себе скидок никогда, потому как это всегда выливается в технический долг.
   
   
2. Не распухнет. И дело не в том, сколько функций будет создано, а как.
   
   
3. ID хорошо использовать для быстрого доступа к одному элементу. И если вы точно уверены, что он есть. Так обычно обращаются к контейнерам, общим разделам страницы. Для работы с множеством элементов намного удобнее работать с именами классов и document.getElementsByClassName
   
   
4. Что нам говорит caniuse:
   
   • Does not have support for classList on SVG or MathML elements.
     
   • Does not support the second parameter for the toggle method
     
   • Does not support multiple parameters for the add() & remove() methods
     
   
   
5. Я реализовал на чистом CSS, никаких костылей особо не увидел. Основа реализации — псевдо-класс :checked и комбинаторы + или ~
   для управления состоянием соответсвующих табов.
   

[toyvo_glumov]

Negwereth:
По всем пунктам вы правы, кроме самого первого:
>Нежизнеспособно. Абсолютно.
Ведь работает же, а работает — не трогай.
Про технический долг и прокрастинацию я обязательно подумаю завтра или послезавтра.

[Negwereth]

работает — не трогай.

Крайне надуманный принцип. Именно из-за него написаны тонны говнокода, который доводит до седых волос людей, который получают его в поддержку.

Мне больше импонирует принцип

Пишите свой код так, как если бы завтра его будет поддерживать психопат, который знает, где вы живёте.

[toyvo_glumov]

Да, сейчас бы цитату с башорга.

Answer 2

[Yevgeniy Kisselyov]

Для каждой вкладки писать почти одинаковые функции?
Это мягко говоря - не очень хорошо.