通过bootstrap在li之间切换"active"类

Question

我在切换"主动"课时遇到麻烦,我的问题与其他人有点不同,因为我已经查到了类似的问题.如果我在代码中解释它会更好.

这是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包含的顶级菜单,第二个是容器类.当我点击例如"Profile"时,它只是加载了profile.php的内容,它是由这个脚本完成的

function profile(object){

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

它只是将span9的内容更改为profile.php的内容.与其他人(设置等)类似.重点是,当我点击它们时,它工作得很完美,"主动"类会自动更改,就像我使用这种脚本来切换"活动"类一样:

<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.php的内容,就像我更改了span9的内容一样.这是脚本:

function exams(object){

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

}

一切都很好,内容已经改变,然后,当我点击exams.php中的菜单时,我的脚本不起作用,它只是没有交换或切换"活动"类,在li之间.这是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>

不知道可能是什么问题,"活跃"课程只停留在#1,并且不会改变.谁能回答,我真的很感激.

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 /属性选择器直接绑定目标元素上的click处理程序,"document"(是的,jquery当然)将捕获事件,并处理你绑定的处理程序.