jQuery Event-Handler只需单击一下即可更改CSS-Class [英] jQuery Event-Handler changes CSS-Class with a shift of one click

问题描述

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

I have some kind of strange behaviour using jQuery's Click-Function. I also tried it with the on-EventHandler. There is some simple markup from Twitter's Bootstrap Navbar and I'm trying to change the CSS-Class of an li-tag. In this case I want to remove the CSS-Class active and add it to the currently clicked li-tag. But the change get's applied with a shift of one click. So when when e.g. 'Preview' is the current visual active element and I click on 'Document', the CSS-Class seems not to be changed. When I click afterwards on 'Slidecast', then the visual active element is 'Document' which is not the expected behavoiur. Next Click on 'Preview' and now 'Slidecast' is the visual active element. What I'm doing wrong? I tried it with remove and add and also with toggleClass, but that doesen't matter. Here is my code and markup. JS is wrapped into a 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);
});

根据您的回答确定，这是我用来处理该问题的代码:

OK according to your answers, here is the code I've used to handle that problem:

$("#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);
});

推荐答案

您可以处理window对象上的hashchange事件，以添加活动"类:

You can handle the hashchange event on the window object in order to add your 'active' class:

$(".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

这篇关于jQuery Event-Handler只需单击一下即可更改CSS-Class的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！