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语句

如果项目2处于活动状态（州层），则取消激活项目3（县层）

否则li 3处于活动状态（县图层），然后取消激活项目2（状态图层）

我知道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/

如果您希望第一个锚点独立切换，您可以向其他人添加一个类并使用类似的东西

$("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");
});

Answer 2

您正在寻找jQuery＆＃39; .index()。这可以获得所有li元素的索引。请注意，这是基于0的。

您只需设置var elementIndex = $('li').index($(this).parent());

即可

＆＃13;

$(document).on('click', 'li a', function(){
  
  console.log(
    $('li').index($(this).parent())
  );
  
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a>List Item 1</a></li>
  <li><a>List Item 2</a></li>
  <li><a>List Item 3</a></li>
  <li><a>List Item 4</a></li>
  <li><a>List Item 5</a></li>
</ul>

＆＃13;

文档

.index() - https://api.jquery.com/index/

如果是Statement和toggleClass

2 个答案:

文档