Question

我在切换＆＃34;活跃＆＃34;时遇到了麻烦。上课时，我的问题与其他人有点不同，因为我已经抬起了类似的问题。如果我在代码中解释，它会更好。

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

function profile(object){

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

它只是将span9的内容更改为profile.php的内容。与其他人（设置等）类似。重点是，当我点击它们时，它的工作完美，“活跃的”＃34;课程自动更改，顺便说一下，我使用这种脚本来切换＆＃34; active＆＃34;类：

<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>

当我点击＆＃34;考试＆＃34;时，必须将行 - 流体的内容更改为exams.php的内容，就像我更改了span9的内容一样。这是脚本：

function exams(object){

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

}

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

不知道可能是什么问题，＆＃34;活跃＆＃34;上课只停留在＃1，并且没有变化。谁能回答，我真的很感激。

Answer 1

使用jquery delegate system（对于jQuery＆gt; = 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）将捕获事件，并处理你绑定的处理程序。

通过bootstrap在li之间切换“active”类

1 个答案: