javascript - 根据 URL 添加活动菜单或导航类
问题描述
我在active
我的菜单项中添加了一个类。但是,我当前的实现是将类添加到所有列表菜单项,而不是当前页面。
请让我知道我当前的代码是否存在问题,以及我可以做些什么来达到预期的结果。
<ul id="menu_items">
<li class="has-sub"><a href="/collections">STORE</a></li>
<li><a href="/collections">RESEARCH</a></li>
<li><a href="/collections">INFO</a></li>
</ul>
$(function(){
var current = location.pathname;
$('#menu_items li a').each(function(){
var $this = $(this);
// if the current path is like this link, make it active
if($this.attr('href').indexOf(current) !== -1){
$this.addClass('active');
}
})
})
.active {text-decoration:underline;}
解决方案
好的,试试这个方法,希望能成功
<ul id="menu_items">
<li><a href="#index">Index</a></li>
<li class="has-sub"><a href="#store">STORE</a></li>
<li><a href="#research">RESEARCH</a></li>
<li><a href="#info">INFO</a></li>
</ul>
</html>
<Script>
$("#menu_items li").bind("click", function(e){
$("li").click(function() {
$(this).siblings().find("a").removeClass("active");
$(this).find("a").addClass("active")
})
})
</Script>
推荐阅读
- sql - 如何加入查询以在一张表中显示结果
- c# - 找不到 DataTemplate 的 Window 的 DataContext
- vba - MS Word 中需要快捷键:Shift + 'Space' = 逗号后跟文本中的空格
- axios - 获取请求在 POSTMAN 中有效,但在 axios 中无效
- node.js - 检查除初学者值以外的值范围内的日期
- python - 为数据框制作一系列列标题
- selenium-webdriver - 从输入框中检索值并且该值是数字时,RSpec 期望的行为很奇怪
- python - 通过 sqlachemy 映射类在 MySQL JSON 字段中插入键而不进行查询
- ruby-on-rails - 在 ruby on rails 中定义客户路线
- vue.js - 在单个组件中从“vue”导入 Vue 是否正确?