この例では、[タブ]タブの実装のアプリケーションを紹介します。このプラグインは比較的簡単です。特定のコンテンツは次のとおりです
ソースコードファイル：
Tab.js
実装の原則：
1.要素をクリックするとき、最初に元々強調表示された要素をキャンセルします。
2。次に、クリックされた要素を強調表示します
3.要素をクリックすると、ドロップダウンボックスのオプションがある場合は、自体を選択し、ドロップダウンボックスを選択します。
5。アニメーションが定義されている場合は、最初にアニメーションを実行してからコールバックを実行します
ソースコード分析：
1. [要素がクリックされたときに表示方法がトリガーされ、次の4つのイベントがトリガーされます。
1.1。 hiden.bs.tab：前の要素を非表示にします
1.2。 show.bs.tab：現在の要素を表示します
1.3。 Hideen.bs.tab：前の要素を隠すことで完成しました
1.4。 shown.bs.tab：現在の要素を完全に表示します
1.5。 Hiden/Showイベントソースコード：
var $ fortion = $ ul.find（ '。アクティブ：last a'）var hideevent = $ .event（ 'hide.bs.tab'、{relatedtarget：$ this [0]}）var showevent = $ .event（ 'show.bs.tab'、{relateTarget：$ forter [0]}）2。アクティブ：現在のオブジェクトをアクティブにします
2.1。ナビゲーション要素にaria-Expanded属性を追加して、この要素が拡張状態にあるかどうかをマークする
2.2。リフローメカニズムを使用して、offsetWidth属性を使用して、部分的な再塗装を達成します
それでも詳細に勉強したい場合は、ここをクリックして3つのエキサイティングなトピックを勉強して添付できます。
ブートストラップ学習チュートリアル
ブートストラップ実用的なチュートリアル
ブートストラッププラグインの使用チュートリアル
この一連のチュートリアルは、Bootstrap Basic Tutorials Special Topic、Click to Learnのようにコンパイルされています。
上記はこの記事に関するものです。誰もがJavaScriptプログラミングを学ぶことが役立つことを願っています。