На данный момент есть такой код:
var tabsLink = document.querySelectorAll('.nav-tabs a'),
tabsElement = document.querySelectorAll('.tab-pane'),
i;
tabsElement[0].classList.add('tab-open');
var showTabs = function(e) {
e.preventDefault();
var targetElement = document.querySelectorAll(this.getAttribute('href'));
for (i = 0; i < targetElement.length; i++) {
if (targetElement[i].classList.contains('tab-open')) {
targetElement[i].classList.remove('tab-open');
return false;
}
targetElement[i].classList.add('tab-open');
}
};
for (i = 0; i < tabsLink.length; i++) {
tabsLink[i].addEventListener('click', showTabs);
}
/*Tabs in Javascript*/
* {
padding: 0;
margin: 0;
}
.container {
max-width: 960px;
margin: 0 auto;
}
.tabs-wrapper {
margin-top: 30px;
}
.nav-tabs {
margin-bottom: 15px;
}
.nav-tabs li {
list-style: none;
display: inline-block;
}
.nav-tabs a {
font-size: 15px;
display: inline-block;
text-decoration: none;
color: #428bca;
padding: 12px 25px;
border-radius: 4px;
border: 1px solid #ddd;
}
.nav-tabs a:hover {
background: #eee;
transition: 0.3s;
}
.nav-tabs .tab-active {
color: #000;
}
.tab-pane {
padding: 20px;
background: #f7f7f9;
border: 1px solid #e1e1e8;
border-radius: 4px;
display: none;
}
.tab-open {
display: block;
}
.title-tabs {
font-size: 20px;
font-weight: bold;
margin-right: 10px;
}
<body>
<div class="container">
<div class="tabs-wrapper">
<ul class="nav-tabs">
<li><a href="#tabs1" class="tab-active" data-toggle="tab">Tabs 1</a>
</li>
<li><a href="#tabs2" data-toggle="tab">Tabs 2</a>
</li>
<li><a href="#tabs3" data-toggle="tab">Tabs 3</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="tabs1"><span class="title-tabs">Tabs1</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis recusandae dignissimos fugit reprehenderit nam eum qui magni. Assumenda amet nostrum earum sequi a hic, quis autem blanditiis dolorum, laborum
eos! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat corporis, dolorum! Error nostrum molestias quae accusantium ipsam impedit aliquid dolore cupiditate eos quo, obcaecati sunt, rem est dolorum, explicabo, doloribus.</div>
<div class="tab-pane" id="tabs2"><span class="title-tabs">Tabs2</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi sapiente, delectus tenetur quos molestias nulla ducimus dolores iste, aspernatur, a rerum ullam at veritatis laboriosam molestiae eius illo
dolor maxime. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam soluta alias illum consequatur tenetur a repellat, fugit deleniti perspiciatis amet, ab dolorum. Veritatis cupiditate voluptatibus temporibus. Aspernatur quisquam
est ut!</div>
<div class="tab-pane" id="tabs3"><span class="title-tabs">Tabs3</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et exercitationem quam tempora voluptatum minima minus quibusdam blanditiis, mollitia quia numquam ea sint, molestiae molestias, temporibus assumenda
ipsam ullam cupiditate. Architecto. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto perferendis, voluptatibus, quidem quam veritatis mollitia illum veniam obcaecati, voluptate ad illo consequuntur neque alias magnam magni vel,
facilis ipsum culpa!</div>
</div>
</div>
</div>
</body>
Тут как обычно первая вкладка открыта, теперь мне надо сделать следующие чтобы при клике на Tabs 2 скрывался блок текста первого таба и появлялся второй, суть такова чтобы при клике на разные кнопки показывались только те блоки которые заданы у кнопки в href
, чтобы не было как сейчас на каждую кнопку нажимал и все показались в ряд. Не могу понять как дальше действовать.