在Bootstrap中如何在li之间切换“active”类？

Question

我遇到了一个关于切换“active”类的问题，我的问题与其他人略有不同，因为我已经查找了类似的问题。如果我用代码来解释会更好。

这是index.php文件：

<?php 
include("module/navbar.html");
?>

<div class="container">
    <div class="row-fluid">
        <div class="span3">
            <div class="well sidebar-nav">
            <ul class="nav nav-list">
              <li class="nav-header">Personal</li>
              <li class="active"><a href="javascript:void(0);" onclick="profile();">Profile</a></li>
              <li><a href="javascript:void(0);" onclick="my_settings();">Settings</a></li>
              <li><a href="javascript:void(0);" onclick="achievements();">Achievements</a></li>
              <li><a href="javascript:void(0);" onclick="last_results();">Results</a></li>
            </ul>
            </div>
        </div>

        <div class="span9">
            <p> Here is the index.php content </p>
        </div>
    </div>
</div>

如您所见，有两个菜单，第一个是顶部菜单，包含在 navbar.html 中，第二个是 container 类中的菜单。例如，当我点击“个人资料”时，它只会加载 profile.php 的内容，这是通过以下脚本完成的：

function profile(object){

            $(".span9").html(ajax_load)
            .load("module/profile.php")
            .hide()
            .fadeIn("slow");
}

它只是将span9的内容更改为profile.php的内容。与其他（设置等）类似。主要的问题是，当我点击它们时，它们可以完美地工作，“active”类会自动更改。顺便说一下，我使用这种脚本来切换“active”类：

<script type="text/javascript">
   $(".nav-list li").on("click", function() {
  $(".nav-list li").removeClass("active");
  $(this).addClass("active");
});
</script>

这里有一个问题。这是navbar.html文件:

<div class="nav-collapse">
        <ul class="nav nav-menu">
          <li class="active"><a href="index.php">Main page</a></li>
          <li><a href="javascript:void(0);" onclick="grades();">Grades</a></li>
          <li><a href="javascript:void(0);" onclick="attendance();">Attendance</a></li>
          <li><a href="javascript:void(0);" onclick="exams();">Exams</a></li>
          <li><a href="javascript:void(0);" onclick="kbo_result();">Olympiads</a></li>
        </ul>
</div>

当我点击“Exams”时，row-fluid的内容必须更改为exams.php的内容，就像我更改了span9的内容一样。以下是脚本：

function exams(object){

            $(".row-fluid").html(ajax_load)
            .load("module/exams.php")
            .hide()
            .fadeIn("slow");

}

一切都很顺利，内容已经被更改，但是当我在exams.php中点击菜单时，我的脚本不起作用，它只是无法在li之间切换或切换“active”类。 这里是exams.php：

<div class="row-fluid">
    <div class="span3">
      <div class="well sidebar-nav">
        <ul class="nav nav-list">
          <li class="nav-header">PBT Exams</li>
          <li class="active"><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">5</a></li>
          <li><a href="#">6</a></li>
        </ul>
      </div>
    </div>

    <div class="span9">
        <p> Here is the exam.php content </p>
    </div>
</div>

不知道问题出在哪里，“active”类一直停留在第一个，没有改变。谁能回答，请帮忙解答，非常感激。

- user3551344

Answer 1

使用 jQuery 代理系统（对于 jQuery >= 1.7： http://api.jquery.com/on/）

如果您绑定事件处理程序到某些输入元素上，当您改变DOM树并移除该元素时，事件将不会再次触发。

解决方案：

<script type="text/javascript">
   $(document).on('click', '.nav-list li', function() {
       $(".nav-list li").removeClass("active");
       $(this).addClass("active");
   });
</script>

现在会发生什么？当你点击“li”元素时，将触发一个事件（类型为'click'），并向DOM树上移动。即使你没有直接通过类/ID/属性选择器在目标元素上绑定点击处理程序，“document”（是的，当然是jquery）也会捕获事件，并处理你绑定的处理程序。

- itnelo

---

太好了！非常感谢你！ - user3551344