0

我使用 jQuery 的 Click-Function 有一些奇怪的行为。我还用 on-EventHandler 进行了尝试。Twitter 的 Bootstrap Navbar 中有一些简单的标记，我正在尝试更改 li-tag 的 CSS-Class。在这种情况下，我想删除活动的 CSS-Class 并将其添加到当前单击的 li-tag 中。但是只需单击一下即可应用更改。因此，当例如“预览”是当前可视活动元素并且我单击“文档”时，CSS 类似乎没有改变。当我随后单击“幻灯片”时，视觉活动元素是“文档”，这不是预期的行为。下一步单击“预览”，现在“幻灯片”是视觉活动元素。我做错了什么？我尝试使用 remove 和 add 以及 toggleClass，但这没关系。这是我的代码和标记。JS 被包装成一个 Dom-Ready-Function。

<div class="navbar">
  <div class="navbar-inner">
    <ul class="nav">
      <li class="active"><a href="#!document_defaultview">Document</a></li>
      <li><a href="#!document_slidecast">Slidecast</a></li>
      <li><a href="#!document_preview">Preview</a></li>
      <li><a href="#!document_notes">Notes</a></li>
      <li><a href="#!document_questions">Questions</a></li>
      <li><a href="#!document_activities">Activities</a></li>
    </ul>
  </div>
</div>

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);
});
4

3 回答 3

2

您可以处理窗口对象上的 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

于 2013-03-25T19:42:52.013 回答
0

我最好的猜测是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);
});
于 2013-03-25T19:41:49.407 回答
0

当点击功能被触发时，这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。

于 2013-03-25T19:36:31.390 回答