Question

我有一个侧边菜单，我想在加载页面时显示活动类。

显而易见的答案是在每个页面中使用jquery执行此操作，但它会重复大量代码并且很无聊。

所以我在全球的app.js中使用了这个：

//Active side-menu
$('.nav-item').click(function () {
   $(this).addClass('active');
});

但这不起作用，因为它处于活动状态，当它加载页面时，此类在加载html后被删除

我该怎么办？

<ul class="nav">
    <li class="nav-item">
        <a class="nav-link" href="general-setup" onclick="gitLabFetch()" id="createEnviromentTab">
            <img src="../resources/img/icons/create-icon.png" alt="" class="menuIcon">
            <span class="menu-title">Create Environment</span>
        </a>
    </li>
    //A lot of li elements
<ul>

Answer 1

我认为在页面加载时，你应该获取网址，尝试使用javascript在菜单上找到它，然后将活动类添加到nav-item，如下所示：

#!/usr/bin/perl

package MyDB;
use strict;
use warnings;
use base 'DBI';

sub connect {
    return DBI::connect( 'MyDB', 'dbi:SQLite:dbname=so.sqlite', '', '',);
}


package MyDB::db;
use strict;
use warnings;
use base 'DBI::db';

sub prepare {
    my $self = shift;
    warn "  DB: PREPARE\n";
    return $self->SUPER::prepare( @_ );
}


package MyDB::st;
use strict;
use warnings;
use base 'DBI::st';

sub execute {
    my $self = shift;
    warn "  ST: EXECUTE\n";
    return $self->SUPER::execute( @_ );
}

sub fetchrow_hashref {
    my $self = shift;
    warn "  ST: FETCHROW_HASHREF\n";
    return $self->SUPER::fetchrow_hashref( @_ );
}




package main;
use strict;
use warnings;

my $dbh = MyDB::connect();

warn "1) --- DO ---\n";
$dbh->do("CREATE TABLE IF NOT EXISTS ttt (a int)");

warn "2) --- PREPARE/EXECUTE/FETCHROW_HASHREF ---\n";
my $sth = $dbh->prepare( "SELECT * FROM ttt" );
$sth->execute();
$sth->fetchrow_hashref();

warn "3) --- SELECTROW_ARRAY ---\n";
$dbh->selectrow_array( "SELECT * FROM ttt" );

一个小例子，您可能需要调整网址部分：

＆＃13;

$(document).ready(function() {
    var url = window.location.pathname + window.location.search;
    $('ul.nav a.nav-link[href="' + url + '"]').parent().addClass('active');    
});

＆＃13;

$(document).ready(function() {
    var url = 'general-setup';//window.location.pathname + window.location.search;
    $('ul.nav a.nav-link[href="' + url + '"]').parent().addClass('active');    
});

＆＃13;

.active {
  background: red;
 }

＆＃13;

Answer 2

好的，经过进一步的思考后，我想出了一个解决方案。我将采用的方法是添加data属性以锚定到，这使您可以自由定义列表项链接到的路径，并根据路线相应地设置它们的样式...

＆＃13;

(() => {
  $('li')
  .filter((i, li) => $(li).data('route') === window.location.pathname)
  .addClass('active')
})()

＆＃13;

<li data-route="/">HOME</li>
<li data-route="/friends">Friends</li>
<li data-route="/profile">Profile</li>
<li data-route="/blog">Blog</li>

＆＃13;

正如您所看到的，在我离开过滤后的列表后，我会遍历所有列表项并过滤掉所有与data-route不匹配的window.location.pathname属性的项目，我将一个活动的类应用于匹配的项目。

将有效课程添加到菜单

2 个答案: