javascript - If 语句和 toggleClass

Question

说到 Javascript，我有点菜鸟。基本上我有一个简单的 ul，附有 5 个 li

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #e7e7e7;
    background-color: rgba(255,255,255,.5);
}

li {
    float: left;
}

li a {
    display: block;
    color: #000000;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
}

li a:hover:not(.active) {
    background-color: rgba(221,221,221,.5);
}


li a:hover {
    background-color:rgba(221,221,221,.5);
}
.active {
    background-color: rgba(22,47,127,.25);
}

<ul class="topnav" id="ulclass">
  <li><a href="javascript:void(0);" onclick= "addNavLayer(Points);">Display Points</a></li>
  <li><a href="javascript:void(0);" onclick="addNavLayer(States);">Display States</a></li>
  <li><a href="javascript:void(0);" onclick="addNavLayer(Counties);">Display Counties</a></li></li>

  </ul>

$("ul a").click(function(){
//this works fine at just toggling the boxes
    $(this).toggleClass("active");


});

这是棘手的部分......一个 if 语句说

如果 li 元素 2 处于事件状态(州层)，则停用 li 元素 3(县层)

否则li 3是active的(县层)，然后de-activate li item 2(state层)

我知道在 jQuery 中有可能我只是在引用列表中的各个元素然后切换事件状态时遇到了问题。

Answer 1

我想这就是你要找的

$("ul a").click(function(){
    //first remove all instances of the class
    $("ul a").removeClass("active");
    //then set the active
    $(this).addClass("active");    
});

https://jsfiddle.net/xzsa7py3/

如果你想让第一个 anchor 独立切换，你可以给其他 anchor 添加一个类并使用类似这样的东西

$("ul a").click(function(){
    //remove class from anchors that have class 'should-toggle'
    $("ul a.should-toggle").removeClass("active");
    //add class to selected
    $(this).toggleClass("active");
});