jQuery はタブ切り替えを実装します。少し前に jQ にアクセスして作成した js コードの単純な効果が、次のように jQ で記述されます。HTML コード: コードをコピー コードは次のとおりです。 最新コメント最近の注目コメントランダム記事< /h3> 🎜> 1234567890-2 1234567890-3 CSS コード: コードをコピー コードは次のとおりです: #sidebar-tab{border:1px Solid #ccf;margin-bottom :1.5em;オーバーフロー :hidden;} #tab-title h3{color:#666;font-size:15px;font-weight:400;} #tab-title .selected{color:#356aa0 ;border-bottom: 0px;} /*タイトル選択時のスタイル*/ #tab-title spadding:5px 9px 5px 10px;border:1px Solid #ccf;border-right:0px;margin-left :-1px;cursor :pointer;} #tab-content .hide{display:none;} /*コンテンツの最初の部分がデフォルトで表示され、残りは非表示になります*/ #tab-content ul{padding:5px 10px;overflow:hidden ;} #tab-content ul li{padding-top:5px;height:20px;} jQ コード: コードをコピー コードは次のとおりです: </a>$('#tab-title span ').click(function(){ </span>$(this).addClass("selected").siblings().removeClass();//removeClass は他の現在のクラスを削除します。現在のオブジェクトのみが addClass("selected" ) を持ちます。兄弟() は現在のオブジェクトの兄弟要素を意味し、removeClass は削除を意味します。 Hide().eq($('#tab-title span') .index(this)).show(); </div> <div class="codebody" id="code80159"> <br> jQ を使用して記述すると非常に便利です。最初に ID 内の子要素を見つけて関数を追加し、兄弟要素を見つけた後、他の兄弟要素を「none」と表示します。 🎜><br>以下は元の jQ コードです: <br> <br><br><br><br> </div>コードをコピー<br><br><strong> コードは次のとおりです:<br></strong> <br><script> <div class="codetitle"> <span>$('#tab-title span').click(function(){ $(this).addClass("selected").siblings(). RemoveClass(); $("#tab-content > ul").slideUp('1500').eq($('#tab-title span').index(this)).slideDown('1500') <a style="CURSOR: pointer" data="19680" class="copybut" id="copybut19680" onclick="doCopy('code19680')">}); <u> 現在のイベントをトリガーした後でも、イベントをトリガーする必要はありません。現在のイベントをクリックします。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
