jQuery добавить / удалить класс - PullRequest
Новая
       9

jQuery добавить / удалить класс

0 голосов
/ 27 января 2012

Хорошо, я думал, что смогу сделать это без проблем, но по некоторым причинам я не могу понять это.

Я хочу иметь три коробки, в которых они сложены как карты.Средняя коробка показывает на нагрузке, две другие позади.Затем, когда пользователь наводит курсор на единицу, его z-индекс увеличивается, и поле выходит вперед.Ящики будут оставаться в том же месте, где они находятся при загрузке страницы, я просто хочу, чтобы они полностью отображались при наведении, что, я полагаю, можно сделать, переключив их z-index.

Вот, насколько я понял: http://jsfiddle.net/q8nYz/ (сейчас я просто делаю клик) 

<div id="#container">

    <div id="box-1" class="box"></div>
    <div id="box-2" class="box active"></div>
    <div id="box-3" class="box"></div>

</div>



#container {
    margin: 0 auto;
    position: relative;
    width: 960px;
}

.box {
    background: gray;
    border: 2px solid black;
    float: left;
    height: 300px;
    position: absolute;
    width: 300px;
    -webkit-border-radius: 10px;
}

#box-1 {

}

#box-2 {
    left: 200px;
}

#box-3 {
    left: 400px;
}

.active {
    z-index: 1;
} 



$(".box").click(function() {

    if ($(".box").hasClass("active")) {
        $(".box").removeClass("active");
    }

});

Ответы [ 3 ]

2 голосов
/ 28 января 2012

как то так - http://jsfiddle.net/q8nYz/2/

.box:hover{
     z-index: 100;   
}

требуется только CSS.

1 голос
/ 28 января 2012

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

$(this).addClass("active");

I обновил вашу скрипку .

РЕДАКТИРОВАТЬ Мне нравится эта идея лучше.Он «перемещает их назад», а не просто перемещает их вперед.Таким образом, это кажется более естественным (попробуйте изменить их много). 

$(".box").click(function() {
    $(".box").css("z-index", function() {return $(this).css("z-index") - 1;});
    $(this).css("z-index", 3);
});
0 голосов
/ 28 января 2012

Две вещи, z-index должен быть больше 1 (по умолчанию 1).И вам нужно использовать $(this) вместо .box при ссылке на выбранный элемент, чтобы остановить его добавление и удаление класса из них всех.

Я думаю, это то, что вы хотите: http://jsfiddle.net/q8nYz/15/

...