Как сделать такой переключатель?

Question

[Александр]

Есть три кнопки, при нажатии на которые появляется соответствующий блок и прячутся остальные. Вот мой пример:
https://jsfiddle.net/eb0x33se/5/
Но хотелось бы узнать как можно это реализовать более правильно.

Comments

[Павел Корнилов]

Сделать классы с нужными стилями.
Далее по клику на элементе циклом пробежать по DOM, удалив классы у потомков нужного блока, после чего добавив нужный класс целевому объекту.

Answer 1

[0xD34F]

<button data-block="block-one">69</button>
<button data-block="block-two">187</button>
<button data-block="block-three">666</button>

<div class="block block-one">hello, world!!</div>
<div class="block block-two">fuck the world</div>
<div class="block block-three">fuck everything</div>

$('body').on('click', 'button', function() {
  const $block = $(`.${this.dataset.block}`).toggleClass('show');
  $('.block').not($block).removeClass('show');
});

// или

document.addEventListener('click', ({ target: { dataset: { block } } }) => {
  if (block) {
    document.querySelectorAll('.block').forEach(({ classList: cl }) => {
      cl[cl.contains(block) ? 'toggle' : 'remove']('show');
    });
  }
});

или

<button class="button">69</button>
<button class="button">187</button>
<button class="button">666</button>

<div class="block block-one">hello, world!!</div>
<div class="block block-two">fuck the world</div>
<div class="block block-three">fuck everything</div>

const $blocks = $('.block');
const $buttons = $('.button').click(function() {
  const $block = $blocks.eq($buttons.index(this)).toggleClass('show');
  $blocks.not($block).removeClass('show');
});

// или

const blocks = document.querySelectorAll('.block');
const buttons = document.querySelectorAll('.button');

buttons.forEach(n => n.addEventListener('click', onClick));

function onClick() {
  const index = Array.prototype.indexOf.call(buttons, this);
  blocks.forEach((n, i) => n.classList[i === index ? 'toggle' : 'remove']('show'));
}

Answer 2

[Stalker_RED]

https://jsfiddle.net/eb0x33se/7/

Answer 3

[Griboks]

Используйте jQuery UI. Там куча таких прикольных штук на оф. сайте.

Comments

[Павел Корнилов]

Бред, речь о правильном исполнении.

[Griboks]

KorniloFF, вы утверждаете, что оф. сайт jQuery будет предлагать неправильное исполнение? Что они обманывали пользователей в течении многих лет?

[Павел Корнилов]

Griboks, Нет, но это не решение конкретной задачи, а подтягивание мощного инструмента с, возможно, не нужным функционалом.

[Griboks]

KorniloFF, вопрос был про jQuery. Я ответил про него. Хотя, фрейворки типа React сами по себе слишком мощные и предоставляют слишком много функционала. Поэтому надо всегда писать на чистом javascript, не правда ли?

[Павел Корнилов]

Griboks, в тегах Квери указан не был. В тексте вопроса я его тоже не вижу.
Насчет использования фреймворков - в инете куча холивара, и все равно все расходятся при своем. Моё мнение - использовать их только тогда, когда тебе нужно более 50% их функционала. ИМХО, тогда это вполне себе оправдано.

[Griboks]

KorniloFF, автор поменял вопрос и теги.

[Павел Корнилов]

Griboks, тогда я пас, как могу судить о том, чего не вижу? =)