Question

我正在尝试使用jQuery中的.click事件更改5 div的class =“Hoofdstuk”底部边框的颜色。正如您在以下链接中看到的那样：

casperjonker.site50.net

你可以看到它不起作用。这是HTML代码：

<div class="Hoofdstuk" id="Introductie"></div>
<div class="Hoofdstuk" id="Content"></div>
<div class="Hoofdstuk" id="Interactie"></div>
<div class="Hoofdstuk" id="FrontEnd"></div>
<div class="Hoofdstuk" id="Projecten"></div>

这是我的jQuery代码：

$('.Hoofdstuk').click(function () {
    $(this).animate({
        'width': '55em'
    }).siblings().animate({
        'width': '5em'
    }).css({
        'border-color': '#ffba00'
    }).siblings().css({
        'border-color': '#333'
    })
});

这是CSS代码：

.Hoofdstuk {
    width: 5em;
    height: 25em;
    float: left;
    border-width: 0.1em;
    overflow:hidden;
    border-bottom: #ffba00 solid 0.5em;
}

如果有人能看到这个问题，请告诉我。

我感谢你的时间。

永清

Answer 1

在你的第一个.animate（）上 - 在继续之前使用.end（）。这告诉它回到原来的选择器（这个），这可能是罪魁祸首。否则，它将使用siblings（）作为当前选择器。

Answer 2

尝试.end()链

$('.Hoofdstuk').click(
    function(){
        $(this)
            .animate({'width': '55em'}).siblings().animate({'width':'5em'}).end()
            .css({'border-color':'#ffba00'}).siblings().css({'border-color':'#333'})

});

DEMO

Answer 3

如果没有end()，您可以将它们按顺序排列并按照以下方式执行：

$('.Hoofdstuk').click(function () {
    $(this)
    .animate({'width': '55em'})
    .css({'border-color': '#333'})
    .siblings().animate({'width': '5em'})
    .css({'border-color': '#ffba00'})
});

DEMO - 这首先是兄弟姐妹

尝试使用jQuery .click事件更改边框颜色

3 个答案: