Question

我有下面的代码，我想激活单击的链接。我尝试了其他方法，但没有用。

 <div id="collapse1" class="panel-collapse collapse">  
    <ul class="list-group">  
      <a><li class="list-group-item active" style="background-color: #394263;color: white">A</li></a>  
      <a><li class="list-group-item" style="background-color: #394263;color: white">B</li></a>
        <a><li class="list-group-item" style="background-color: #394263;color: white">C</li></a>
    </ul>    
  </div>

Answer 1

所以这里的第一个错误是：

在UL中直接锚定不是理想的方法，您应该在LI内使用锚定。然后在点击的项目上添加类别，并从所有其他项目中删除查看此示例

$(document).ready(function(){
  $('.list-group-item').click(function(){
    $('.list-group-item').removeClass('active');
    $(this).addClass('active');
  });
});

.list-group-item.active a {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="collapse1" class="panel-collapse collapse">  
    <ul class="list-group">  
      <li class="list-group-item active" style="background-color: #394263;color: white"><a>A</a></li>  
      <li class="list-group-item" style="background-color: #394263;color: white"><a>B</a></li>
        <li class="list-group-item" style="background-color: #394263;color: white"><a>C</a></li>
    </ul>    
  </div>

Answer 2

通常推荐使用JavaScript处理浏览器事件的方法是使用event listeners，而我知道添加/删除类的最佳方法是使用classList property。

这个简单的演示演示了如何使用它们。
（有关更多信息，请参见代码中的注释以及可能的链接的MDN资源）

// Identifies an HTML element
const myDiv = document.getElementById("my-div");

// Calls the `toggleBlue` function whenever the element is clicked
myDiv.addEventListener("click", toggleBlue);

// Defines the `toggleBlue` function
function toggleBlue(event){ // Listeners can access their triggering events
  const clickedThing = event.target; // Events have a `target` property

  // DOM elements have a `classList` property, which includes the
  //   methods `.contains`, `.remove`, and `.add`
  if(clickedThing.classList.contains("blue")){
    clickedThing.classList.remove("blue");
  }
  else{
    clickedThing.classList.add("blue");
  }
}

#my-div{ width: 20ch; border: 1px solid grey; font-weight: bold; }
.blue{ color: blue; }

<div id="my-div">Some content</div>

如何添加活动类以在单击时链接

2 个答案: