将有效课程添加到菜单

时间:2018-02-06 13:51:16

标签: javascript jquery html css jsp

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

显而易见的答案是在每个页面中使用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>

2 个答案:

答案 0 :(得分:3)

我认为在页面加载时,你应该获取网址,尝试使用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;
&#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;
&#13;
&#13;

答案 1 :(得分:0)

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

&#13;
&#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;
&#13;
&#13;

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