Question

我在html中有这段代码：

<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中这样做？如何确定电子邮件链接是否处于活动状态？

Answer 1

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

上面的代码

尝试my code on jsfiddle

Answer 2

老实说，我认为这是做你想做的事的正确和快捷的方式：

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

Answer 3

请注意，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();
     }
});

Answer 4

使用以下代码：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();
});

如何确定哪个ul li在jquery中有效？

4 个答案: