Есть такой код для навигации .При нажати на 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;
}
Service 1
Service 2
Service 3
Text 1
Text 2
Text 3
Ответ
$(document).ready(function() { $(".tabs .tabtext").click(function() { $(".tabs .tabtext").removeClass("active"); $(this).addClass("active"); $(".content .context").removeClass("visible"); $(".content .context").eq($(this).index()).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; }
Комментариев нет:
Отправить комментарий