これらのタブを動作させるにはどうすればよいですか？

Question

私はJSを学ぶ過程にあり、最初から簡単なタブを書くことに決めました。

私には2つの機能があります。各タブここで

ナビゲーション

に liをクリックすることで、この機能をトリガするための別のものにクラス 'active'を追加するための一つの問題は、そのクラスのtoggelsは、右のように動作していないようである
https://codepen.io/Allan11/pen/Bzvxya

私のコードです。それを修正する方法について私に正しい方向を示すことができますか、あるいはこれらの機能への私のアプローチが間違っていて、それを行う簡単な方法がありますか？

Answer 1

これをこのように記述したい場合は、ハンドラにパラメータを設定し、この上にsrcElementを見て、clickイベントが発生した要素をキャッチする必要があります。これにより、あなたのliのうちどれがクリックされたのかがわかります。ただし、どのコンテンツがこのliアイテムに属しているのかを特定し、そのクラスに.activeクラスを割り当て、他のすべてのクラスからクラスを削除する方法を見つける必要があります。私は個人的にこれを行うためにli上の共有クラスまたはデータ項目を使用します。

しかし、これはjQuery UIフレームワークとjQuery UIフレームワークではすでに完全にうまく機能しているようなものです。ホイールを再発明する本当の理由がない限り、jQuery UIを使用します。