Question

我正在为点击的菜单栏项添加“有效”类，但在点击后页面转到其他链接时会删除。

这是我的HTML：

<ul class="nav navbar-nav">
    <li class="active">
        <a href="<?php echo base_url(); ?>news">News / Article</a>
    </li>
    <li>
        <a href="<?php echo base_url(); ?>players">Players</a>
    </li>
    <li>
        <a href="<?php echo base_url(); ?>forum">Forum</a>
    </li>
    <li class="dropdown">
        <a href="<?php echo base_url(); ?>rules" class="dropdown-toggle" data-toggle="dropdown">Rules <b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li>
                <a href="#">Action</a>
            </li>
            <li>
                <a href="#">Another action</a>
            </li>
        </ul>
    </li>
    <?php if(!empty($session)){ ?>
    <li>
        <a href="<?php echo base_url(); ?>profile">Profile</a>
    </li>
    <?php } ?>
    <li>
        <a href="<?php echo base_url(); ?>gallery">Gallery</a>
    </li>
    <?php if(empty($session)){ ?>
    <li>
        <a href="<?php echo base_url(); ?>register">Register</a>
    </li>
    <?php } ?>
</ul>

使用Javascript：

$(".nav li").click(function () {
    $(".nav li").removeClass('active');
    $(this).addClass('active');
});

Answer 1

活动类可能会删除，因为当您单击链接时加载新视图并加载其他HTML。

Answer 2

您正在重新加载该网站，因此它会像第一次一样加载HTML。

因此，在您不离开或重新加载该网站之前，您将只拥有“有效”课程。

一种修复方法，通过Ajax加载内容，菜单不会改变。

我希望它会对你有所帮助。

Answer 3

你不能只用那个javascript做到这一点。您需要从URL获取数据并确定哪个菜单处于活动状态。

首先获取页面中的当前网址。并做以下操作;

$(".nav li").removeClass('active');
var urlType = document.URL.split("/");
$("a[href*='/" + urlType + "']").addClass("active"); // contains /players

当你去这个网址时;

http://yourdomain.com/players;

js将是;

$(".nav li").removeClass('active');
$("a[href*='players']").addClass("active");

玩家菜单将处于有效状态

如何在codeigniter中的菜单上添加活动类

3 个答案: