Question

我正在进行导航，因为我需要在点击时显示一些不同的东西。但是一次只能显示一个标签。我不是专业人士，所以希望有人可以告诉我我做错了什么？

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

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

我也做了一个码头 - 小提琴离线。

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/

Answer 1

嗯，乍一看，我可以告诉您，您需要将(".logmein-box")更改为("#logmein-box")。请注意主题标签而不是句点，因为它是ID而不是CLASS。

Answer 2

<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();

}）; }）;

Answer 3

你有一个类选择器而不是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

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

3 个答案: