Question

我正在使用Bootsrtap 4，并且试图将类active添加到我的nav-item元素中何时其导航链接href属性与当前网址相同。

在html方面，我使用了如下所示的基本网址生成器：

<ul class="navbar-nav">
    <li class="nav-item">
        <a class="nav-link" href="{{ url('/brands') }}" role="button">Brands</a>
    </li>

    <!-- ... -->
</ul>

然后我使用jQuery方法将它们与当前网址进行比较：

$('.navbar-nav .nav-item .nav-link').each( () => {
    // If the current path and the link url are the same...
    if ($(this).attr('href').indexOf(location.pathname) !== 1) {
        // ...then add the class 'active' to 'nav-item', its parent
        $(this).parent().addClass('active')
    }
})

但是，我注意到$(this).attr('href')是undefined，可能是因为它是一个生成的网址，因此nav-item没有得到{{1} }类。

编辑：作为示例，现在它是一个非常基本的url，没有参数，看起来像这样： http://domain.example/brands

有人知道如何解决这个问题吗？预先感谢。

Answer 1

我建议您采取其他方式。无需使用jQuery“激活”链接，您可以使用Laravel在服务器端轻松完成此操作：

<ul class="navbar-nav">
    <li class="nav-item">
        <a class="{{ Request::is('brands*') ? 'nav-link active' : 'nav-link' }}"
           href="{{ url('/brands') }}" 
           role="button">Brands</a>
    </li>

    <!-- ... -->
</ul>

说明：

Laravel使用模板引擎树枝来呈现HTML服务器端。您可以轻松地添加条件来检查当前请求参数，而无需操纵DOM客户端。 Laravel使您可以甚至使用通配符来检查请求路径。

Answer 2

好吧，这是我通常在所有laravel项目中所做的事情，当涉及到使侧边栏或单击时的任何链接“活动”时：-

<li class="nav-item {{ in_array(Route::currentRouteName(),[
            'admin.dashboard',
            'admin.updates',
        ])? 'active show' : ''}}">
          <a href="" class="nav-link with-sub"><i class="typcn typcn-clipboard"></i>Dashboard</a>
          <nav class="nav-sub">
            <a href="{{ route('admin.dashboard') }}" class="nav-sub-link {{  BladeHelper::sideBar_link_isActive('admin.dashboard') }}">Home</a>
          </nav>
</li>

现在注意此{{ BladeHelper::sideBar_link_isActive('admin.dashboard') }}

我创建了动态助手功能来获取当前网址并返回“活动”类

路径：app \ Helpers \ BladePageHelper

<?php

namespace App\Helpers;

use Route;
class BladePageHelper
{
    public static function sideBar_link_isActive($selectedLink){
        $currentRouteName = Route::currentRouteName();
        if($selectedLink === $currentRouteName){
            return 'active';
        }else{
            return '';
        }
    }
}

我在这里使用路线名称

Route::("/","MyController@mymethod")->name("myname")

您也可以使用url。

我希望这会有所帮助。

快乐编码

Answer 3

您的问题很可能是由于使用() => {}或function () {}之间的差异引起的使用箭头语法时，prop this是未绑定的。这意味着$(this)还将返回一个空的jQuery对象，而不是返回锚点。任何后续的jQuery链接都会返回空白/未定义。

因此，将.each( () => {更改为.each(function() {将至少解决您未定义的问题。

有关箭头语法的信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Laravel-将类添加到任何导航链接，如果其生成的URL与当前路由匹配

3 个答案: