在Web开发中,经常需要跟踪用户点击的菜单项,特别是在单页应用(SPA)或多标签界面中。当用户点击一个新的菜单链接时,有时需要知道之前哪个链接是活动的,以便进行状态更新或样式修改。
$(document).ready(function() {
// 初始化存储上一个活动链接的变量
var $previousActiveLink = null;
$('.menu-link').click(function(e) {
e.preventDefault();
// 获取当前点击的链接
var $currentLink = $(this);
// 检查是否存在上一个活动链接
if ($previousActiveLink) {
console.log('上一个活动链接是:', $previousActiveLink.attr('href'));
// 移除上一个链接的活动状态
$previousActiveLink.removeClass('active');
}
// 设置当前链接为活动状态
$currentLink.addClass('active');
// 更新上一个活动链接为当前链接
$previousActiveLink = $currentLink;
// 执行其他操作...
});
});
$(document).ready(function() {
$('.menu-link').click(function(e) {
e.preventDefault();
// 查找当前的活动链接
var $previousActiveLink = $('.menu-link.active');
if ($previousActiveLink.length) {
console.log('上一个活动链接是:', $previousActiveLink.attr('href'));
$previousActiveLink.removeClass('active');
}
// 设置新的活动链接
$(this).addClass('active');
// 执行其他操作...
});
});
<ul class="menu">
<li><a href="#home" class="menu-link" data-link-id="home">首页</a></li>
<li><a href="#about" class="menu-link" data-link-id="about">关于</a></li>
<li><a href="#contact" class="menu-link" data-link-id="contact">联系</a></li>
</ul>
$(document).ready(function() {
$('.menu').on('click', '.menu-link', function(e) {
e.preventDefault();
var $currentLink = $(this);
var $previousActiveLink = $('.menu-link.active');
if ($previousActiveLink.length && $previousActiveLink.data('link-id') !== $currentLink.data('link-id')) {
console.log('上一个活动链接ID:', $previousActiveLink.data('link-id'));
$previousActiveLink.removeClass('active');
}
$currentLink.addClass('active');
// 执行其他操作...
});
});
.off()
先解绑事件,或使用事件委托.active
类的样式优先级足够以上方法都可以有效地跟踪和检查上一个活动链接,选择哪种方法取决于具体的项目需求和代码结构。
没有搜到相关的文章