根据窗口位置在链接上动态添加活动类

时间:2018-02-06 16:24:57

标签: javascript jquery

我正在尝试根据位置路径名在active代码上动态添加<a>类。

pathnamehref值都相同。但是,根据我编写的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>

3 个答案:

答案 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 { }