我正在尝试根据位置路径名在active
代码上动态添加<a>
类。
pathname
和href
值都相同。但是,根据我编写的jquery代码,我看不到active
类的添加。我无法弄清楚到底缺少什么。
$(document).ready(function() {
var pathname = window.location.pathname;
$('.br-sideleft .br-sideleft-menu').find('.active').removeClass('active');
$('.br-sideleft .br-sideleft-menu li a').each(function() {
if (this.href == pathname) {
$(this).addClass('active');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="br-sideleft">
<ul class="br-sideleft-menu">
<li class="br-menu-item">
<a class="br-menu-link active" asp-area="" asp-controller="Home" asp-action="Index">Link 1</a>
</li>
</ul>
<ul class="br-sideleft-menu">
<li class="br-menu-item">
<a class="br-menu-link" asp-area="" asp-controller="Home" asp-action="Page2">Link 2</a>
</li>
<li class="br-menu-item">
<a class="br-menu-link" asp-area="" asp-controller="Home" asp-action="Page3">Link 3</a>
</li>
</ul>
<ul class="br-sideleft-menu">
<li class="br-menu-item">
<a class="br-menu-link" asp-area="" asp-controller="Home" asp-action="Page4">Link 4</a>
</li>
<li class="br-menu-item">
<a class="br-menu-link" asp-area="" asp-controller="Home" asp-action="Page5">Link 5</a>
</li>
</ul>
</div>
答案 0 :(得分:2)
您的if
条件不正确:
$('.br-sideleft .br-sideleft-menu li a').each(function() {
if (this.href == pathname) { //this is wrong
$(this).addClass('active');
}
});
将其更改为:
$('.br-sideleft .br-sideleft-menu li a').each(function() {
if ($(this).attr('href') == pathname) {
$(this).addClass('active');
}
});
答案 1 :(得分:0)
我将采用的方法是添加一个数据属性以锚定到,这使您可以自由定义列表项链接到的路径,并根据路线相应地设置它们的样式...
(() => {
$('li')
.filter((i, li) => $(li).data('route') === window.location.pathname)
.addClass('active')
})()
<li data-route="/">HOME</li>
<li data-route="/friends">Friends</li>
<li data-route="/profile">Profile</li>
<li data-route="/blog">Blog</li>
正如您所看到的,我遍历所有列表项并过滤掉所有没有与window.location.pathname匹配的数据路由属性的项目,在我离开过滤后的列表后,我申请匹配项的活动类。
note 这是一个广义的答案,希望从示例中获取的学习曲线转化为您的答案:-)
答案 2 :(得分:0)
一个简单的$('.br-sideleft .br-sideleft-menu li a').filter(function() {
return this.pathname == pathname
}).addClass('active');
会告诉您读取href会返回整个网址,而不是您在属性中看到的内容。所以只需在比较时读取路径名
import { NgModule } from "@angular/core";
import { Routes } from "@angular/router";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { LoginComponent } from "./login.component";
const routes: Routes = [
{ path: "/login", component: LoginComponent },
];
@NgModule({
imports: [NativeScriptRouterModule.forChild(routes)],
exports: [NativeScriptRouterModule]
})
export class LoginRoutingModule { }