Jqueryクラスの切り替え

Question

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

私は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>だけを使用すると、最初からやり直して間違った場所を見つけます。

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

Answer 1

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>