Question

我有一组链接（相同的URL）。单击关联链接时，我想对“ li”元素进行以下更改：

1）在li元素中添加class ='active'。

2）删除“ a”锚，并仅保留“ span”元素。

jQuery之前的HTML：

<ul class="navbar-list">
   <li><a href='#' data-id="1" > <span>Link 1</span></a> </li>
   <li><a href='#' data-id="2" > <span>Link 2</span></a> </li>
   <li><a href='#' data-id="3" > <span>Link 3</span></a> </li>
</ul>

使用jQuery：

$('ul.navbar-list li a').on('click', function() {
$(this).parent("li").addClass('active');          
$("ul.navbar-list li.active a").contents().unwrap();});

jQuery后的

HTML（假定单击了第一个链接）：

<ul class="navbar-list">
   <li class='active'><span>Link 1</span></li>
   <li><a href='#' data-id="2" > <span>Link 2</span></a> </li>
   <li><a href='#' data-id="3" > <span>Link 3</span></a> </li>
</ul>

问题：

单击另一个链接时，我需要重置并删除上述行为（我希望链接1删除“活动”类，并恢复锚点）。最好的方法是什么？

谢谢！

Answer 1

您可以在添加active类之前存储单击元素的索引和html，然后在下次单击另一个元素时，可以将其还原。

这是一个演示：

let temp = null;

$('ul.navbar-list').on('click', 'li a', function() {
  let $this = $(this);
  let $parent = $this.parent("li");

  if (temp != null) {
    $('ul.navbar-list li')[temp.index].outerHTML = temp.html;
  }

  temp = {
    index: $parent.index(),
    html: $parent[0].outerHTML
  };

  $parent.addClass('active');
  $this.contents().unwrap();
})

.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="navbar-list">
  <li>
    <a href='#' data-id="1"> <span>Link 1</span></a>
  </li>
  <li>
    <a href='#' data-id="2"> <span>Link 2</span></a>
  </li>
  <li>
    <a href='#' data-id="3"> <span>Link 3</span></a>
  </li>
</ul>

jQuery：设置/取消活动链接

1 个答案: