2016-12-16 31 views
1

リスト内に2つのボタンがあり、その間にクラスを切り替えることができるようにしたいと思います。Jqueryクラスの切り替え

私はJqueryの初心者であり、いくつかの行を書きましたが、Chromeのコンソールに従ってすべてが正しくリンクされていても動作していないようです。ここで

は、HTMLです:

<ul class="tab-group"> 
    <li class="tab active"><a href="#signup">Sign Up</a></li> 
    <li class="tab"><a href="#login">Log In</a></li> 
</ul> 

、ここでは、対応するjQueryの:事前に

$('.tab a').click(function) { 
    e.preventDefault(); 
    $(this).parent().addClass('active'); 
    $(this).parent().siblings().removeClass('active'); 
    target = $(this).attr('href'); 
    $('.tab-content > div').not(target).hide(); 
    $(target).fadeIn(600); 
}); 

ありがとう!

ここでは動作しているようですが、部分的には完全なHTMLページでは機能しませんが、<ul>だけを使用すると、最初からやり直して間違った場所を見つけます。

ご回答いただきありがとうございます。

+0

あなたは答えをチェックしましたか?それが正しいのであればそれを受け入れてください(左のVをクリックしてください) – Dekel

答えて

2
  1. あなたは構文エラーを持っていた - それはあなたがイベントオブジェクト(コード内e.preventDefault())を使用する場合は、関数宣言に追加する必要があります$('.tab a').click(function() {
  2. する必要があります - function(e) {、そうでない場合e変数ではありません定義された。ここで

あなたのコードに修正です:

$('.tab a').click(function(e) { 
 
    e.preventDefault(); 
 
    $(this).parent().addClass('active'); 
 
    $(this).parent().siblings().removeClass('active'); 
 
    target = $(this).attr('href'); 
 
    $('.tab-content > div').not(target).hide(); 
 
    $(target).fadeIn(600); 
 
});
.active { 
 
    background: blue; 
 
} 
 
.active a { 
 
    color: white; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="tab-group"> 
 
    <li class="tab active"><a href="#signup">Sign Up</a></li> 
 
    <li class="tab"><a href="#login">Log In</a></li> 
 
</ul>

+0

もう一度私にそれを打つ! –

+0

@AutumnLeonardあなたは次の1つを取得します;)(投票のおかげで、私は推測します) – Dekel

+0

これはあなたやOPの質問ですが、ここでグローバルにする必要がありますか? –

関連する問題