Bootstrapのタブ制御は、シンプルさと使いやすさのために開発者の間で非常に人気があります。しかし、そのスタイルは比較的単一ですが、元のフォームに基づいてより美しい効果をどのように達成できますか？私はこの問題を検討しています。さらに、ブートストラップのタブは、各タブをクリックしてスイッチングを達成する必要があります。 jQueryを使用して自動スイッチングを制御し、一定期間（5秒など）後にタブから別のタブに切り替えることができますか？以下は、私の実装プロセスです。まず、タブパーツのHTMLコードです。
<div role = "tabpanel"> <！ - nav tabs-> <ul role = "tableist" style = "margin-top：0px;" id = "Doctabs"> <li role = "Presention"> <a href = "＃section_new" aria-controls = "home" role "tab" data-toggle = "tab">最新</a> <liロール= "プレゼンテーション"> <役割= "プレゼンテーション"> <a href = "＃section_month" aria-controls = "quals" role = "tab" data-toggle = "tab">人気</a> </ul> <！ - タブパン - > <div> <div role = "tabpanel" id = "section_new"> <p>
タブ1の内容
</p> </div> <div role = "tabpanel" id = "section_week"> <p>
タブ2の内容
</p> </div> <div role = "tabpanel" id = "section_month"> <p>
Tab3のコンテンツ
</p> </div> </div> </div>
これらのコードは、基本的にブートストラップのネイティブコードと同じです。あまりにも多くの変更を加える必要はありません。独自のデータを入力してください。
タブスタイルを設定しましょう。これらのスタイルは、ブートストラップの元のスタイルを上書きして、タブを美化する効果を実現します。
<style type = "text/css">。tab .nav-tabs {border-bottom：0 none; background：＃eaea .nav-tabs li.active ai {border：0 none; background：＃e67e22; color：#fff;}。tab .nav-tabs .nav-tabs li.active a：after {content： ""; position：aspolute; .tab-content {padding：5px; color：＃5a5c5d; font-size：14px; line-height：20px; margin-top：5px; border-bottom：1px solid＃e67e22;}@メディアのみのスクリーンと（最大西：480px） 100％;背景：透明;}。タブ.nav-tabs li.active a {border-radius：10px 10px 0 0;}。tab .nav-tabs li：border-bottom-left-radius：0;}。tab .nav-tabs li a {magne bottom; li.active a：after {border：none;}} </style>効果が発生した後、次のように見えます：
オリジナルのスタイルのブートストラップよりも優れていますか（しかし、誰もが独自の好みを持っています。実装プロセスの紹介にすぎません。もちろん、CSSを変更することで他のスタイルを作成することもできます）
タブの自動スイッチングを実装する方法を見てみましょう。これ以上苦労せずに、コードを入力するだけです。
//自動回転関数タイマー（i）{interval = setInterval（function（）{$（ "＃doctabs li：eq（"+i+"）a"） list area.mouseover（function（）{clearinterval（interval）;}）; //継続回転$（ "。タブペイン"）。上記は、編集者が紹介したブートストラップのタブコントロールの美化と改善です（推奨）。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！