Есть такой код для навигации .При нажати на service должно открыватся нужное окно.Есть задача использовать только jquery код.Активные кнопки справляются с задачей хорошо а вот с блоками проблема.Помогите разобратся.Заранее спасибо
Вот код
$(document).ready(function() {
$(".tabtext").click(function() {
$(".tabtext").removeClass("active");
$(this).addClass("active");
});
});
$(document).ready(function() {
$(".tabtext").click(function() {
$(".content").hasClass("visible");
$(".content").removeClass("visible");
$(".content").addClass("visible");
});
});
.tabs {
width: 30em;
height: auto;
display: inline-block;
text-align: center;
margin: 0 auto;
box-sizing: border-box;
padding: 1em;
background-color: silver;
}
.tabtext {
display: inline;
font-size: 1em;
padding: 1em;
margin: 0 0.2em 0 0.2em;
}
.active {
color: red;
}
.content {
width: 30em;
display: block;
text-align: center;
margin: 0 auto;
box-sizing: border-box;
background-color: gray;
}
.context {
width: 100%;
height: auto;
padding: 2em;
display: none;
text-align: center;
box-sizing: border-box;
}
.context>h1 {
font-size: 1em;
}
.visible {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs">
<h1 class="tabtext active">Service 1</h1>
<h1 class="tabtext">Service 2</h1>
<h1 class="tabtext">Service 3</h1>
</div>
<div class="content">
<div class="context visible">
<h1>Text 1</h1>
</div>
<div class="context">
<h1>Text 2</h1>
</div>
<div class="context">
<h1>Text 3</h1>
</div>
</div>