Question

当我按下它并保持活动状态时，我正在尝试将导航链接设置为活动状态，并且它工作正常但是当我应用此jQuery脚本时，我无法打开任何指向其他.html页面的链接。这是我的标记：

        <ul class="nav">
          <li><a href="#">Home</a></li>
          <li><a href="#blog">Blog</a></li>
          <li><a href="about.html">About Me</a></li>
          <li><a href="#contact">Contact Me</a></li>
        </ul>

...和我的jQuery：

    <script>
    $(document).ready(function () {
        $('ul.nav > li').click(function (e) {
            e.preventDefault();
            $('ul.nav > li').removeClass('active');
            $(this).addClass('active');                
        });            
    });
    </script>

感谢任何帮助。

Answer 1

在您的代码中，您可以阻止链接默认点击行为（打开页面）。

尝试这种方式：

$(document).ready(function () {
        $('ul.nav > li a').click(function (e) {
            $(this).closest('ul.nav').find('.active').removeClass('active');
            $(this).parent().addClass('active');                
        });            
    });

Answer 2

这是我的代码：

$(function () {

       $(document).on('click', '.ul.nav li', function () {
            var $this = $(this);

            $this.siblings('li').removeClass('active');
            $this.addClass('active');

            return false;
        });

}

Twitter Bootstrap主动导航链接

2 个答案: