我有一组链接(相同的 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] 删除。
我来说两句