我想根据事件 URL 显示事件菜单项。我有一个菜单,如下面的 HTML 所示。我希望如果单击菜单项,则 active
类将添加到 .menu_mainitem
元素中。
<div class='row' id='main-items'>
<div class='menu_mainitem'>
<a href='https://URL.com/index.php?cat=1' class='click-menu'>1</a>
</div>
<div class='menu_mainitem'>
<a href='https://URL.com/index.php?cat=2' class='click-menu'>1</a>
</div>
<div class='menu_mainitem'>
<a href='https://URL.com/index.php?cat=3' class='click-menu'>1</a>
</div>
</div>
var current = $(location).attr('href');
$('#main-items a').each(function() {
var $this = $(this);
if ($this.attr('href').indexOf(current) !== -1) {
$this.addClass('active');
}
});
不幸的是,这将添加active
类.click-menu
,但我想将该类添加到.menu_mainitem
。我怎样才能实现这个目标?
最佳答案
您可以使用 parent()
或 closest('.menu_mainitem')
来获取您需要的 div。我更喜欢后者,它更强大。
var current = $(location).attr('href');
$('#main-items a').each(function(e) {
var $this = $(this);
if ($this.attr('href').indexOf(current) !== -1) {
$this.closest('.menu_mainitem').addClass('active');
}
});
另请注意,您可以通过使用 toggleClass()
直接选择 .menu_mainitem
元素,并使用一个函数来确定 子
符合您的要求。a
的 href
var current = $(location).attr('href');
$('.menu_mainitem').toggleClass('active', function() {
return $(this).find('a').attr('href').indexOf(current) !== -1;
});
关于jquery - 如何给父div添加一个类?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55281618/