Bootstrap CSS 導航活動類更改 onclick

Question

單擊下一頁時，我在更改活動類時遇到問題。 我已經嘗試了在這里找到的許多不同的腳本變體，但沒有任何成功。 我的項目位於： http : //criminallawyerhuntsville.com/proof/ 。

    <script>
            $('.navbar-right li').click(function(e) {
            $('.navbar-right li.active').removeClass('active');
            var $this = $(this);
            if (!$this.hasClass('active')) {
                $this.addClass('active');
            }
            e.preventDefault();
        });
    </script>
  </head>
      <body>
          <div id="wrapper">
              <header id="header" style="backface-visibility: hidden; transition: -webkit-transform 0.25s ease-in-out;">
                <nav class="navbar navbar-inverse">
                  <div class="container-fluid">
                    <div class="navbar-header">
                      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#Navbar">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span> 
                      </button>
                      <a class="navbar-brand" href="#"><img src="images/robertsonlogo.png" height="50px"></a>
                    </div>
                    <div class="collapse navbar-collapse" id="Navbar">
                      <ul class="nav navbar-nav navbar-right">
                        <li class="active"><a href="index.php">Home</a></li>
                        <li><a href="domestic_violence.php">Domestic Violence</a></li>
                        <li><a href="drug.php">Drug Crime</a></li> 
                      </ul>
                    </div>
                  </div>
                </nav>
            </header>

Answer 1

您在沒有 $(document).ready() 的情況下使用 jQuery 嗎？ 將您的代碼更改為以下代碼以使其觸發，然后檢查控制台是否有錯誤（如果有）。

<script>
$(document).ready(function(){
        $('.navbar-right li').click(function(e) {
        $('.navbar-right li.active').removeClass('active');
        var $this = $(this);
        if (!$this.hasClass('active')) {
            $this.addClass('active');
        }
        e.preventDefault();
        });
});
</script>

Answer 2

如果你使用 prevent default 你想阻止錨標簽工作，所以點擊必須在它上面這個例子是如果你的活動類在 li 而不是錨上：

$('.navbar-right li a').click(function(e) {
   $('.navbar-right li.active').removeClass('active');

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

在這里嘗試： https : //jsfiddle.net/xhgwjxku/

Bootstrap CSS 導航活動類更改 onclick

問題描述

2 個解決方案

解決方案1
0 2016-05-04 14:40:58

解決方案2
0 2016-05-04 14:57:14

Bootstrap CSS 導航活動類更改 onclick

問題描述

2 個解決方案

解決方案1 0 2016-05-04 14:40:58

解決方案2 0 2016-05-04 14:57:14

解決方案1
0 2016-05-04 14:40:58

解決方案2
0 2016-05-04 14:57:14