Question

我有一个问题我试图用jquery从一个元素中删除活动类，我搜索但没有找到问题; 我的HTML：

<nav class="navbar-default navbar-side" role="navigation">
    <div class="sidebar-collapse" id="menu">
        <ul class="nav" id="main-menu">
            <li class="text-center">
                <img src="http://cadastru.md/assets/img/find_user.png" class="user-image img-responsive"/>
            </li>
            <li>
                <a class="active"  href="<?php echo base_url(); ?>administration/show/index"><i class="fa fa-dashboard fa-3x"></i>Home</a>
            </li>
            <li>
                <a href="<?php echo base_url();?>administration/add_user"><i class="fa fa-bar-chart-o fa-3x"></i>Add user</a>
            </li>
        </ul>
    </div>
</nav>

我的jquery：

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

如何从a元素中删除活动类？

Answer 1

问题是你要去一个不同的页面，这意味着javascript无关紧要，因为页面随着javascript的变化而变化。

你需要让导航看起来像这样

<nav class="navbar-default navbar-side" role="navigation">
    <div class="sidebar-collapse" id="menu">
        <ul class="nav" id="main-menu">
            <li class="text-center">
                <img src="http://cadastru.md/assets/img/find_user.png" class="user-image img-responsive"/>
            </li>
            <li>
                <a class="<?php if($_SERVER['REQUEST_URI']==base_url()){echo 'active';}?>"  href="<?php echo base_url(); ?>administration/show/index"><i class="fa fa-dashboard fa-3x"></i>Home</a>
            </li>
            <li>
                <a class="<?php if($_SERVER['REQUEST_URI']==base_url() . "administration/add_user"){echo 'active';}?>" href="<?php echo base_url();?>administration/add_user"><i class="fa fa-bar-chart-o fa-3x"></i>Add user</a>
            </li>
        </ul>
    </div>
</nav>

这可能不会是完美的，但希望你理解这个概念。

注意：这不再需要Javascript。

此外，您可以添加一个名为$ currentPage的变量并存储该页面的字符串名称。然后你可以查看if ($currentPage === "Home") {echo "active"} ...

Answer 2

我不知道你在这里想做什么，但以下代码可能对你有所帮助？如果你想这样做，第一个代码将切换你的活动类（我假设没有用，因为你删除它并再次添加相同的），第二个代码从你的元素中删除活动类。在执行任何操作之前，代码将检查您的元素是否具有活动类

    // Toggle Class??
    $('.nav li a').click(function(event){
        event.preventDefault();
        $(this).toggleClass('active');
    });

    // Remove class??
    $('.nav li a').click(function(event){
        event.preventDefault();
        if ($(this).hasClass('active')) {
            $(this).removeClass('active');
        }
    });

让我知道它是否有助于你或你意味着其他一些事情

Answer 3

我不确定，但我认为您需要从jQuery选择器中删除.，如下所示：

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

理论上，如果没有.，选择器会在<a>内找到<li>内的所有<nav> ...

看一下jQuery documentation （抱歉我的回答中的英文不好）

在导航中添加或删除.active类

3 个答案: