1

我正在制作导航，我需要在点击时显示一些不同的东西。但一次只能显示一个选项卡。我不是专业的 jquery，所以希望有人能告诉我我做错了什么？

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

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

查询

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

我还做了一个 codepen - fiddle 离线了。

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/

4

3 回答 3

1

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

于 2013-02-01T08:23:55.973 回答
0 
<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>

then with jquery you use the following code. Also included class highlighter for the selected list element, which you can style with 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-01T08:32:02.883 回答
0

you have a class selector instead of id selector..

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

try this

 $("#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-01T08:32:29.903 回答