javascript - 通过 JavaScript 更改时，HTML 标签将不接受我的 CSS 类

Question

我试图在使用 JavaScript 单击时更改某些 HTML 元素的类，但遇到了一些麻烦。

这是 JavaScript:

$(document).ready(function() {
 $('#subnav li a').click(function(){
    var $this = $(this);
    $this.addClass('highlight').siblings('a').removeClass('highlight');
 });
});

这是相应的 HTML:

<div id="subnav">
    <ul id="subnav-ul">
        <li><a href="javascript:;" class="highlight">Click 1</a></li>
        <li><a href="javascript:;">Click 2</a></li>
        <li><a href="javascript:;">Click 3</a></li>
    </ul>
</div>

单个CSS类如下:

.highlight {
border-left: 4px solid rgba(51,102,255,.6);
color: rgba(0,0,0,.8);
}

Answer 1

anchor 不是 sibling ，它们在 sibling 的 LI 元素中

$('#subnav li a').click(function(){
    $(this).addClass('highlight')
           .closest('li')
           .siblings('li')
           .find('a')
           .removeClass('highlight');
});