twitter-bootstrap 通过引导程序在 li 之间切换“活动”类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24626353/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Toggle "active" class between li by bootstrap
提问by user3551344
I'm having a trouble with toggling "active" class, my problem is a little bit different from the others, cause I already looked up similar questions. It'll be better if I explain in code.
我在切换“活动”类时遇到了麻烦，我的问题与其他问题有点不同，因为我已经查找了类似的问题。如果我在代码中解释会更好。
Here is index.php:
这是 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>
As you see there are two menu, first one is top menu which is included by navbar.html and the second is which is in container class. When I click for example "Profile" it just loads the contents of the profile.php it's done by this script
如您所见，有两个菜单，第一个是包含在 navbar.html 中的顶级菜单，第二个是在容器类中。例如，当我单击“配置文件”时，它只会加载 profile.php 的内容，这是由该脚本完成的
function profile(object){
$(".span9").html(ajax_load)
.load("module/profile.php")
.hide()
.fadeIn("slow");
}
It just changes the content of span9 to the contents of profile.php. Similar to others (settings, etc). The main point is that when I click them it works perfect, the "active" class changes automatically, by the way I'm using this kind of script to toggle "active" class:
它只是将span9 的内容更改为profile.php 的内容。与其他类似（设置等）。主要的一点是，当我单击它们时，它可以正常工作，“活动”类会自动更改，顺便说一下，我使用这种脚本来切换“活动”类：
<script type="text/javascript">
$(".nav-list li").on("click", function() {
$(".nav-list li").removeClass("active");
$(this).addClass("active");
});
</script>
And here is the problem. This is navbar.html:
这就是问题所在。这是 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>
When I click "Exams", the content of row-fluid must be changed to the contents of exams.php like I changed the content of span9. Here is the script:
当我点击“Exams”时，row-fluid 的内容必须像我修改span9 的内容一样修改为exams.php 的内容。这是脚本：
function exams(object){
$(".row-fluid").html(ajax_load)
.load("module/exams.php")
.hide()
.fadeIn("slow");
}
Everything worked great, the contents have been changed, then, when I click the menus in exams.php, my script doesn't work, it just doesn't swap or toggle "active" class, between li. Here is the exams.php:
一切正常，内容已更改，然后，当我单击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>
Don't know what could be the problem, "active" class just stays at #1, and doesn't change. Who can answer please, I'll be really grateful.
不知道可能是什么问题，“活动”类只是停留在#1，并且不会改变。谁能解答一下，万分感谢。
回答by itnelo
Use jquery delegate system(for jQuery >= 1.7: http://api.jquery.com/on/)
使用jquery 委托系统（对于 jQuery >= 1.7：http: //api.jquery.com/on/）
You have some inputs and handlers which are binded at it. If you change DOM tree and remove element, events will not be raised again.
你有一些绑定在它上面的输入和处理程序。如果您更改 DOM 树并删除元素，则不会再次引发事件。
Solution:
解决方案：
<script type="text/javascript">
$(document).on('click', '.nav-list li', function() {
$(".nav-list li").removeClass("active");
$(this).addClass("active");
});
</script>
What happens now? When you click on "li" element, an event (type === 'click') will be triggered and moved up on DOM tree. Even you not directly bind click handler on target element by class/id/attribute selector, "document" (yes, jquery of course) will catch event, and process handler which you bind.
现在会发生什么？当您单击“li”元素时，将触发一个事件（类型 === 'click'）并在 DOM 树上向上移动。即使您没有通过 class/id/attribute 选择器直接绑定目标元素上的单击处理程序，“文档”（是的，当然是 jquery）也会捕获事件，并处理您绑定的处理程序。
