jQuery Event-Handler只需单击一下即可更改CSS-Class
我使用jQuery的Click-Function有一些奇怪的行为。 我也尝试使用on-EventHandler。 Twitter的Bootstrap Navbar有一些简单的标记，我正在尝试更改li-tag的CSS-Class。 在这种情况下，我想删除活动的CSS类，并将其添加到当前单击的li-tag。 但是，只需点击一下即可应用更改。 因此当例如’Preview’是当前的可视活动元素并且我点击’Document’时，CSS-Class似乎不会改变。 当我在’Slidecast’上点击之后，视觉活动元素是’Document’，这不是预期的行为。 下一步点击’预览’，现在’幻灯片’是视觉活动元素。 我做错了什么？ 我尝试使用remove和add以及toggleClass，但这并不重要。 这是我的代码和标记。 JS被包含在Dom-Ready-Function中。
JS
$("#document_navbar a").on('click', function(e) { // Hide all content, display the one related to hash-tag $(".document_view").toggle(false); $(app_locationToId($(this).attr("href"))).toggle(true); // Here is the part that does not work: //$("#document_navbar li.active").removeClass("active"); //$("a[href='" + window.location.hash + "']").parent().addClass('active'); // Another try ... same result as described above! $("#document_navbar li.active").toggleClass("active", false); $("a[href='" + window.location.hash + "']").parent().toggleClass("active", true); });
好的，根据你的答案，这是我用来处理这个问题的代码：
$("#document_navbar a").on('click', function(e) { new_location = app_locationToId($(this).attr("href")); // Hide all content, display the one related to hash-tag $(".document_view").toggle(false); $(new_location).toggle(true); // Change visual active li-tag $("#document_navbar li.active").toggleClass("active", false); $("a[href='" + app_IdToLocation(new_location) + "']").parent().toggleClass("active", true); });
您可以在窗口对象上处理hashchange事件，以便添加“活动”类：
$(".navbar li a").on('click', function(e) { // Hide all content, display the one related to hash-tag $(".document_view").toggle(false); $('.navbar li').removeClass("active", false); }); $(window).on('hashchange', function() { $("a[href='" + window.location.hash + "']").parent().addClass("active", true); });
的jsfiddle
当触发click函数时， window.location.hash是实际页面之一。 因此，您必须确保哈希值已更改，然后接受并切换类。
在我的东西上搜索代码片段并尽快编辑/发布。 🙂
编辑：
所以在这里，在我开始使用history.js类之前，它是我的一个旧项目的片段：
$(function () { "use strict"; var hashListener = null, hashValue = '', hashQuery; function checkIfHashChanged() { var hashQuery = window.location.hash; if (hashQuery === hashValue) { return; } hashValue = hashQuery; //Do the toggle $("#document_navbar li.active").toggleClass("active", false); $("a[href='" + hashQuery + "']").parent().toggleClass("active", true); } function startHashListener() { setInterval(checkIfHashChanged, 100); } function stopHashListener() { if (hashListener !== null) { clearInterval(hashListener); } hashListener = null; } startHashListener(); });
此代码在click函数之外运行，只是在间隔hashlistener期间侦听hashchange。
我最好的猜测是，在点击处理程序完成后， window.location.hash会更新。 因此，您将始终在点击处理程序中获得“旧”位置。 之后该位置会更新，但在下次点击之前您不会使用它…因此您只需点击一下即可。
为了测试这个，我会在类切换的执行上放一个短暂的延迟：
$("#document_navbar a").on('click', function(e) { // Hide all content, display the one related to hash-tag $(".document_view").toggle(false); $(app_locationToId($(this).attr("href"))).toggle(true); setTimeout(function() { $("#document_navbar li.active").toggleClass("active", false); $("a[href='" + window.location.hash + "']").parent().toggleClass("active", true); }, 1000); });