1

クリック時に表示されるいくつかの異なるものが必要な場合、ナビゲーションを作成しています。ただし、一度に表示できるタブは 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;}

Jクエリ

$("#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/

4

3 に答える 3

1

ええと、一見すると、に変更する必要があることがわかり(".logmein-box")ます("#logmein-box")。IDではなく であるため、ピリオドではなくハッシュタグに注意してくださいCLASS。

于 2013-02-01T08:23:55.973 に答える
0

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

});

ここでフィドル

于 2013-02-01T08:32:29.903 に答える
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>

次に、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-01T08:32:02.883 に答える