如何確定jQuery中哪個ul li是活動的？

我有這個代碼的html：如何確定jQuery中哪個ul li是活動的？

<div id="menu"> 
    <div id="memberDetails"><h3><span>Welcome,</span><br /> <em>John Doe</em></h3>  </div> 
      <ul> 
        <li class="active"><a href="#home" class="contentLink">Home <span class="icon"></span></a></li> 
        <li><a href="#email" class="contentLink">Email<span class="icon"></span></a></li> 
        <li><a href="#sns" class="contentLink">Social Networking<span class="icon"></span></a></li> 
        <li><a href="#promos" class="contentLink">Promos<span class="icon"></span></a></li> 
        <li><a href="#rewards" class="contentLink">Rewards<span class="icon"></span></a></li> 
      </ul> 
</div> 
    <div id="email-menu" style='display:none'> 
     <div id="email-memberDetails"><h3><span>Welcome,</span><br /> <em>Another Menu</em></h3>  </div> 
      <ul> 
        <li><a href="#all" class="contentLink">All <span class="icon"></span></a></li> 
        <li><a href="#yahoo" class="contentLink">Yahoo<span class="icon"></span></a></li> 
        <li><a href="#gmail" class="contentLink">Gmail<span class="icon"></span></a></li> 
        <li><a href="#hotmail" class="contentLink">Hotmail<span class="icon"></span></a></li> 
      </ul> 
</div>

我的外部JS代碼。

$(document).bind("mobileinit", function(){ 
$.mobile.pushStateEnabled = true; 
}); 


    $(function(){ 
      var menuStatus; 


      // Show menu 
      $("a.showMenu").click(function(){ 
        if(menuStatus != true){    
        $(".ui-page-active").animate({ 
          marginLeft: "160px", 
         }, 300, function(){menuStatus = true}); 
         return false; 
         } else { 
          $(".ui-page-active").animate({ 
          marginLeft: "0px", 
         }, 300, function(){menuStatus = false}); 
          return false; 
         } 
      }); 

      $('div[data-role="page"]').live('pagebeforeshow',function(event, ui){ 
        menuStatus = false; 
        $(".pages").css("margin-left","0"); 
      }); 

      // Menu behaviour 
      $("#menu li a").click(function(){ 
        var p = $(this).parent(); 
        if($(p).hasClass('active')){ 
          $("#menu li").removeClass('active'); 
        } else { 
          $("#menu li").removeClass('active'); 
          $(p).addClass('active'); 

        } 
      }); 

      // Tabs 
      $('div[data-role="navbar"] a').live('click', function() { 
        $(this).addClass('ui-btn-active'); 
        $('div.content_div').hide(); 
        $('div#' + $(this).attr('data-href')).show(); 
      });

}）;

在我上面的代碼中，我有兩個div，其中包含兩個不同的ul li內容。現在我想要做的是當鏈接<li><a href='#email'>是點擊/活動時，它會隱藏<div id='menu'></div>，現在顯示<div id='email-menu'></div>。我怎麼能在jQuery中做到這一點？如何確定電子郵件鏈接是否處於活動狀態？

來源

2012-02-02 Wondering Coder

使用下面的代碼：http://jsfiddle.net/7W8a6/

$("a").click(function() { 
    var thiz = $(this); 
    // hide all menu that ends with 'menu' 
    $("div[id$=menu]").hide(); 
    // show [clicked id]-menu element 
    $(thiz.attr("href") + "-menu").show(); 
});

來源

2012-02-02 02:19:52

您的代碼存在隱藏菜單的問題，無論何時點擊標籤之一，雖然點擊一個不是「電子郵件」。 – InspiredJW 2012-02-02 02:24:37

這是我的目的。我認爲發佈者有其他菜單：＃sns-menu，＃promos-menu，＃rewards-menu，＃all-menu，＃yahoo-menu，＃gmail-menu，＃hotmail-menu :) – 2012-02-02 02:43:18

注意，IDS是爲了是唯一的，使用類常見的元素（memberDetails）

<div id="menu"> 
    <div class="memberDetails"><h3><span>Welcome,</span><br /> <em>John Doe</em></h3>  </div> 
      <ul> 
        <li class="active"><a href="#home" class="contentLink">Home <span class="icon"></span></a></li> 
        <li><a href="#email" class="contentLink">Email<span class="icon"></span></a></li> 
        <li><a href="#sns" class="contentLink">Social Networking<span class="icon"></span></a></li> 
        <li><a href="#promos" class="contentLink">Promos<span class="icon"></span></a></li> 
        <li><a href="#rewards" class="contentLink">Rewards<span class="icon"></span></a></li> 
      </ul> 
</div> 
    <div id="email-menu" style='display:none'> 
     <div class="memberDetails"><h3><span>Welcome,</span><br /> <em>Another Menu</em></h3>  </div> 
      <ul> 
        <li><a href="#all" class="contentLink">All <span class="icon"></span></a></li> 
        <li><a href="#yahoo" class="contentLink">Yahoo<span class="icon"></span></a></li> 
        <li><a href="#gmail" class="contentLink">Gmail<span class="icon"></span></a></li> 
        <li><a href="#hotmail" class="contentLink">Hotmail<span class="icon"></span></a></li> 
      </ul> 
</div>

然後在JavaScript：

$("#email").click(function(){ 
    if($(this).parent().is(".active")){ 
     $("#menu").hide(); 
     $("#email-menu").show(); 
    } 
});

來源

2012-02-02 02:16:08 ggreiner

$(function() { 
    $(".contentLink").click(function() { 
     if($(this).attr('href') == '#email') { 
      $("#menu").hide(); 
      $("#email-menu").show(); 
     } 
    }); 
});

我上面的代碼工作

嘗試my code on jsfiddle

來源

2012-02-02 02:19:03 InspiredJW

的奇數部分是你的jsfiddle其工作，但是當我在我的網站應用它不會。我已經添加了我的外部js文件，我知道這是此事件背後的人。希望你能再次幫助我InspiredJW。請再看看我的帖子。謝謝 – 2012-02-02 03:15:16

得到它的工作。謝謝 – 2012-02-02 03:33:29

老實說，我認爲這是正確的，更快的方式做你想要什麼：

$('a[href=#email]').click(function() { 
    $('#menu').hide(); 
    $('#email-menu').show(); 
});

來源

2012-02-02 02:48:29 BernardoFire

如何確定jQuery中哪個ul li是活動的？

回答

相關問題