Как сделать переключатель контента по клику на соответствующую вкладку (Доставка/Оплата)?
Что бы под переключателем менялся контент (display:block/none)
Буду признателен за помощь
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуНабросок на коленке одного их вариантов представлен ниже. Осталось стилизовать 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>
Это стандартное поведение, обычно называемое табами. Можно воспользоваться готовыми решениями (например, 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.
Вашу задачу можно решить на 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>