0

Как сделать переключатель контента по клику на соответствующую вкладку (Доставка/Оплата)? Что бы под переключателем менялся контент (display:block/none) введите сюда описание изображения введите сюда описание изображения

Буду признателен за помощь

3 ответа 3

2

Набросок на коленке одного их вариантов представлен ниже. Осталось стилизовать input под ваши потребности. А в будущем старайтесь гуглить самостоятельно, а тут просить помощь в решении конкретно того, что уже не получилось.

var dostavka = document.getElementById('dostavka'),
    oplata = document.getElementById('oplata'),
    tab1 = document.querySelector('.tab1'),
    tab2 = document.querySelector('.tab2'),
    input = document.querySelectorAll('input');
for (var i=0; i<input.length; i++) {
  input[i].onchange = function() {
    if (dostavka.checked) {
      tab1.style.display = 'block';
      tab2.style.display = 'none';
    } else if (oplata.checked) {
      tab1.style.display = 'none';
      tab2.style.display = 'block';
    };
  };
};
.tab1 {  display: block;}
.tab2 {  display: none;}
<input type="radio" id="dostavka" name="checker" checked />
<input type="radio" id="oplata" name="checker" />
<div class="tab1">11111</div>
<div class="tab2">22222</div>

1
  • @alex мерси, fixed
    – lexxl
    27 янв 2016 в 16:03
1

Это стандартное поведение, обычно называемое табами. Можно воспользоваться готовыми решениями (например, jQueryUI tabs) или написать что-то самостоятельно. Если хочется на выходе получить как можно более гибкий и простой к изменениям код, лучше всего как можно меньше данных зашивать в код.

Я подготовил небольшой пример, иллюстрирующий подход с выненсением логики представления в слой HTML. Чтобы код получился более лаконичным, можно воспользоваться какими-нибудь библиотеками для работы с DOM (jQuery, Sizzle, atomjs, etc).

var toArray = function(nodes) {
    return Array.prototype.slice.call(nodes);
  },

  ACTIVE_CSS_SELECTOR = 'active',

  tabSwitchers = toArray(document.querySelectorAll('button[data-tab]')),

  activateTab = function(name) {
    var tabs = toArray(document.querySelectorAll('.tab[data-tab]'));

    tabs.forEach(function(tab) {
      tab.dataset.tab === name ?
        tab.classList.add(ACTIVE_CSS_SELECTOR) : tab.classList.remove(ACTIVE_CSS_SELECTOR);
    });
  },

  tabSwitchClickHandler = function(event) {
    activateTab(event.target.dataset.tab);
  };

tabSwitchers.forEach(function(button) {
  button.onclick = tabSwitchClickHandler;
});
.tab {
  display: none;
}

.tab.active {
  display: block;
}
<button data-tab='payment'>Payment</button>
<button data-tab='delivery'>Delivery</button>

<div class='tabs container'>
  <div class="tab active" data-tab='payment'>Payment tab content</div>
  <div class="tab" data-tab='delivery'>Delivery tab content</div>
</div>

На jsfiddle.

1

Вашу задачу можно решить на css

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.b-tabs {
  max-width: 500px;
  margin: 25px auto;
  font-family: 'Segoe UI', sans-serif;
  font-size: 0;
  text-align: center;
}

[id^=tab-] {
  display: none;
}

[id^=tab-] + label {
  display: inline-block;
  vertical-align: middle;
  background: #E1D9D4;
  font-size: 16px;
  padding: 8px 15px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

[id^=tab-] + label:nth-of-type(1) {
  border-radius: 10px 0 0 10px;
}

[id^=tab-] + label:nth-of-type(2) {
  border-radius: 0 10px 10px 0;
}

[id^=tab-] + label:before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 100%;
  height: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

[id^=tab-]:checked + label:before {
  bottom: 0;
  background: #00f;
  height: 100%;
}

[id^=tab-]:checked + label > span {
  color: #fff;
  position: relative;
}

[id^=tab-] + label ~ [id^=tab-content-] {
  display: none;
  background: #fff;
  border: 1px solid #ccc;
  padding: 15px;
  font-size: 16px;
}

#tab-1:checked + label ~ #tab-content-1,
#tab-2:checked + label ~ #tab-content-2 {
  display: block;
  margin-top: 15px;
}
<div class="b-tabs">
  <input type="radio" name="t" id="tab-1" checked />
  <label for="tab-1"><span>Доставка</span></label>

  <input type="radio" name="t" id="tab-2" />
  <label for="tab-2"><span>Оплата</span></label>

  <div id="tab-content-1">
    b-tab-content 1
  </div>
  <div id="tab-content-2">
    b-tab-content 2
  </div>
</div>

1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.