Страницы

Поиск по вопросам

вторник, 13 ноября 2018 г.

Не работает jquery tabs

Есть такой код для навигации .При нажати на 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; }

Service 1

Service 2

Service 3

Text 1

Text 2

Text 3


Комментариев нет:

Отправить комментарий