jquery显示一个div并隐藏另一个div

我正在导航，我需要在点击时显示一些不同的东西。但是一次只能显示一个标签。我不亲jquery，所以希望有人能告诉我我做错了什么？jquery显示一个div并隐藏另一个div

我需要登录框显示当我进入我的网站，但当我推新用户时，登录框应该滑动，然后新的用户框应滑下。

HTML

<div class="nav"> 
    <a id="logmein" href="#">login</a> 
    <a id="createme" href="#">new user</a> 

    <div id="logmein-box">logmein</div> 
    <div id="createme-box">createme</div> 
</div>

CSS

.nav {width:600px; height:500px; background-color:#F60;} 
#logmein-box {display:none; width:400px; height:400px; background-color:#F20;} 
#createme-box {display:none; width:400px; height:400px; background-color:#567;}

JQUERY

$("#logmein").click(function(e) { 
    e.preventDefault(); 
    $(".logmein-box").slideToggle(200); 
    if(this).hasClass("test"); 
    return; 
    $(this).addClass("test"); 
    $(".createme-box").hide(); 
});

我也做了codepen - 小提琴WA离线。

http://codepen.io/anon/pen/mHGbJ

编辑：我结束了使用此代码 - 任何人都可以使用相同的输出更短更聪明的方法呢？

$('#login-slide').click(function (e) { 
     e.preventDefault(); 
     if (!$(this).hasClass("selected")) { 
      $('#user-box').slideUp(function() { 
       $('#login-slide').addClass('selected'); 
       $('#user-slide').removeClass('selected'); 
       $('#login-box').slideDown(); 
      }); 
     } 
    }); 
//here is 2 buttons because i need to enter new user from two buttons. 
    $('#user-slide, .lab-key-continue-btn').click(function (e) { 
     e.preventDefault(); 
     if (!$(this).hasClass("selected")) { 
      $('#login-box').slideUp(function() { 
       $('#user-slide').addClass('selected'); 
       $('#login-slide').removeClass('selected'); 
       $('#user-box').slideDown(); 
      }); 
     } 
    }); 




});

选定的类只是为我的导航按钮上的背景颜色，所以我可以看到哪些是活动的。

小提琴这里：http://jsfiddle.net/iBertel/54Xyu/

来源

2013-02-01 Bertel

嗯，乍一看，我可以告诉你，你需要改变为("#logmein-box")。注意标签，而不是句号，因为它是ID而不是CLASS。

来源

2013-02-01 08:23:55 Trolzie

更新我的问题 – Bertel

<ul id="user"> 
<li id="action_login">login</li> 
<li id="action_create">new user</li> 
</ul><div id="login" class="action">logmein</div><div id="create" class="action">createme</div>

然后用jquery使用下面的代码。还包括所选列表元素的班级荧光笔，您可以使用css风格

$(document).ready(function(){ 
$('ul#user li').click(function(){ 
    var ref = $(this).attr('id'); // 'action_login' 
var divcl = ref.split('_')[0]; // 'action' 
var divid = ref.split('_')[1]; // 'login' 
$('div.'+divcl).css('display', 'none'); 
$('div#'+divid).css('display', 'block'); 
$('ul#user li').removeClass('selected'); 
$('ul#user li#' + ref ).addClass('selected').css('outline', 'none').blur();

}）; }）;

来源

2013-02-01 08:32:02 pelister

你可以看到相同的代码的工作示例HTTP ：//jsfiddle.net/pelister/qD2S6/10/ – pelister

谢谢你，我更新了我的问题 – Bertel

你有一个类选择，而不是id选择..

$(".logmein-box").slideToggle(200);  
---^--- here

试试这个

$("#logmein").click(function(e) { 
    e.preventDefault(); 
    $("#logmein-box").slideDown(200); 
    $("#createme-box").slideUp(200); 
}); 

$("#createme").click(function(e) { 
    e.preventDefault(); 
    $("#logmein-box").slideUp(200); 
    $("#createme-box").slideDown(200); 

});

fiddle here

来源

2013-02-01 08:32:29 bipen

谢谢你，我更新了我的任务离子 – Bertel

你可以创建这个小提琴吗？ – bipen

here：http://jsfiddle.net/iBertel/54Xyu/ – Bertel

jquery显示一个div并隐藏另一个div

回答

相关问题