Показать разные div и добавить класс, если div показан

68
9

Я хочу показать div в зависимости от того, какая ссылка нажата.

Если нажать btn1, link1 должен получить класс = "activemenu", а div1 должен быть показан. Если снова нажать btn1, класс должен быть удален, а div будет скрыт.

Если нажать btn2, то одно и то же должно произойти для div2.

Если один div уже открыт (например, div1 виден, потому что btn1 был нажат), div1 должен скрыться, а класс должен быть удален из btn1 и добавлен в btn2, а div2 должен появиться.

То же самое должно произойти с btn3 и div3.

Дивы отображаются правильно, но класс не будет добавлен или удален.

HTML:

<div> 
<a class="trigger" id="btn1" href="#box1"> Heading 1</a>
<a class="trigger" id="btn2" href="#box2"> Heading 2</a>
<a class="trigger" id="btn3" href="#box3"> Heading 2</a>
</div>
<div class ="toggle" id="box1">box one content</div>
<div class ="toggle" id="box2">box two content</div>
<div class ="toggle" id="box3">box three content</div>

CSS:

div {float:left;padding:20px}
h3 {font-size:2em; curser:pointer;}
div.toggle{display: none;}
.activemenu{font-size: 100px;}

JS:

$("a").click(function(){
var myelement = $(this).attr("href")
$(myelement).slideToggle("slow");
$(myelement).toggleClass("activemenu");
$(".toggle:visible").not(myelement).hide();
});

Демо-код (не работает должным образом)

большое спасибо

спросил(а) 2020-04-04T00:53:27+03:00 3 месяца назад
1
Решение
66

DEMO

Используйте $(this) чтобы выбрать элемент с щелчком

    $("a").click(function(){
var myelement = $(this).attr("href")
$(myelement).slideToggle("slow");

$(this).toggleClass("activemenu");
$(".trigger").not($(this)).removeClass("activemenu");
$(".toggle:visible").not(myelement).hide();

});

ответил(а) 2020-04-04T01:05:23.435987+03:00 3 месяца назад
55

Хорошо, я понимаю ваше требование и мою ошибку, вот эта строка:

$('.trigger:not(#'+this.id+')').removeClass("activemenu");

Также изменил myelement к this

$(this).toggleClass("activemenu");

Таким образом, он удалит класс activemenu из всех activemenu и после этого вы сможете снова добавить тот же класс.

вот обновленный код

$("a").click(function(){
var myelement = $(this).attr("href")
$(myelement).slideToggle("slow");
$('.trigger:not(#'+this.id+')').removeClass("activemenu");
$(this).toggleClass("activemenu");
$(".toggle:visible").not(myelement).hide();
});

ответил(а) 2020-04-04T00:53:27+03:00 3 месяца назад
38

Сначала удалите класс из всех элементов .toogle.

$("a").click(function() {
var myelement = this.href;
$(myelement).slideToggle("slow");
$(this).addClass('activemenu').siblings().removeClass("activemenu");
$(myelement).toggleClass("activemenu");
$(".toggle:visible").not(myelement).hide();
});

Также добавьте правильный селектор CSS. .activemenu, вы использовали без него . оператор.

DEMO

ответил(а) 2020-04-04T00:53:27+03:00 3 месяца назад
38

Ваша запись css я ошибаюсь. Положил '.' До активизации

ответил(а) 2020-04-04T00:53:27+03:00 3 месяца назад
39

Вы можете попробовать добавить ящик данных и просто показать их следующим образом:

<a class = "trigger" id="btn1" data-box="box1" href="#box1"> Heading 1</a> 
<a class="trigger" id="btn2" data-box="box2" href="#box2"> Heading 2</a>
<a class="trigger" id="btn3" data-box="box3" href="#box3"> Heading 2</a>

Jquery

$(".trigger").click(function(){
var element=$("#"+$(this).data("box"));
element.toggle();
$(".activemenu").removeClass("activemenu");
$(element).toggleClass("activemenu");
});

Рабочий скрипт

ответил(а) 2020-04-04T00:53:27+03:00 3 месяца назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема