Question

         <ul class="nav navbar-nav" id="navlist">
                                 <li>
                                    <a  href="">
                                            <i title="" class="fa fa-home-o fa-3x"></i><br>
Dashboard                                    </a>
                                </li>
                                    <li>
                                    <a  href="form.html">
                                            <i title="" class="fa fa-building-o fa-3x"></i><br>
                                            Corporate
                                    </a>
                                </li>
                                <li class="dropdown">
                                    <a href="form.html">
                                        <div class="text-center">
                                            <i title="" data-original-title="" class="fa fa-plus-square fa-3x"></i><br>
                                           Offers</div>
                                    </a>
                                    <ul class="dropdown-menu" role="menu">
                                        <li><a href="login.html"><i title="" data-original-title="" class="fa fa-unlock-alt"></i> Login</a></li>
                                        <li><a href="page-blank.html"><i title="" data-original-title="" class="fa fa-square-o"></i> Blank Page</a></li>
                                        <li class="divider"></li>
                                        <li><a href="invoice.html"><i title="" data-original-title="" class="fa fa-thumbs-o-up"></i> Invoice</a></li>
                                        <li><a href="princing-table.html"><i title="" data-original-title="" class="fa fa-gavel"></i> Princing Table</a></li>
                                        <li><a href="faq.html"><i title="" data-original-title="" class="fa fa-sun-o"></i> FAQ</a></li>
                                        <li class="divider"></li>
                                        <li><a href="register.html"><i title="" data-original-title="" class="fa fa-plus"></i> Register</a></li>
                                        <li><a href="404.html"><i title="" data-original-title="" class="fa fa-warning"></i> 404 Error</a></li>
                                        <li><a href="500.html"><i title="" data-original-title="" class="fa fa-warning"></i> 500 Error</a></li>
                                    </ul>
                                </li>
</ul>

这是jquery脚本

$(document).ready(function () {
$('.nav li a').click(function(e) {

    $('.nav li').removeClass('active');

    var $parent = $(this).parent();
    if (!$parent.hasClass('active')) {
        $parent.addClass('active');
    }
    e.preventDefault();
});

}）;

css我用过

<style>.active { color: red; background:#000; }</style>

在引导程序导航中单击导航时，该类将处于活动状态，但页面不会根据给定的URL更改我该如何解决这个问题。导航显示活动和页面更改

Answer 1

因此我认为该页面因为preventDefault（）而无法更改，即使它确实会在页面重新加载时丢失该类。你有权访问HTML吗？根据项目的规模，您可以在每个页面上给出一个元素，例如： pageX，然后在文档就绪或文档加载时，您可以获取attr并将其与菜单项进行比较，并将类添加到匹配的类中。这对于一个小项目来说是真的可行，或者你可以自动生成这些类，也许是通过cms。

Answer 2

此方法e.preventDefault（）阻止点击的锚点将浏览器带到新的URL。如果您想在重定向之前使用活动导航菜单，请使用以下代码。

$(document).ready(function () {

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

});

要覆盖默认的Active类，请使用！important作为背景颜色。

.active {
    color: red;
    background-color: yellow !important;
}

Answer 3

好吧，从@Amir和@samisonline来看，我认为e.preventDefault()这就是链接无法正常运行的原因。

此外似乎你想要实现的是不同的东西，我理解为在选择路线后将active类添加到正确的nav元素（重定向后）。

要实现此目的，您可以使用window.location.pathname获取页面所在的当前链接，如此。

认为你导航是：

<ul class="dropdown-menu" role="menu">
  <li><a href="login.html"><i title="" data-original-title="" class="fa fa-unlock-alt"></i> Login</a></li>
  <li><a href="page-blank.html"><i title="" data-original-title="" class="fa fa-square-o"></i> Blank Page</a></li>
  <li class="divider"></li>
  <li><a href="invoice.html"><i title="" data-original-title="" class="fa fa-thumbs-o-up"></i> Invoice</a></li>
  <li><a href="princing-table.html"><i title="" data-original-title="" class="fa fa-gavel"></i> Princing Table</a></li>
  <li><a href="faq.html"><i title="" data-original-title="" class="fa fa-sun-o"></i> FAQ</a></li>
  <li class="divider"></li>
  <li><a href="register.html"><i title="" data-original-title="" class="fa fa-plus"></i> Register</a></li>
  <li><a href="404.html"><i title="" data-original-title="" class="fa fa-warning"></i> 404 Error</a></li>
  <li><a href="500.html"><i title="" data-original-title="" class="fa fa-warning"></i> 500 Error</a></li>
</ul>

例如，当用户导航到login.html时，网址现在为：http://yoursite.com/login.html

因此，您可以使用以下jQuery代码将active类添加到nav：

$(function() {
  $('ul.dropdown-menu li a[href^="/' + window.location.pathname.split("/")[1] + '"]').addClass('active');
});

希望它有所帮助！欢呼声。

在引导程序导航中单击导航时，该类将处于活动状态，但页面不会根据给定的URL更改

3 个答案: