jQuery:设置/取消设置活动链接

用户3454156

我有一组链接(相同的 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 删除“活动”类,并恢复锚点)。做到这一点的最佳方法是什么?

谢谢!

光之记忆

您可以在添加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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章