bootstrapダイナミック切替ナビゲーションボタンのactive属性が実現
9604 ワード
ネット上で半日どのように動態的にナビゲーションを切り替えることを探して、偶然bootstrapの実現方法を発見して、bootstrapのフレームワークは本当にとても強くて、直接使って多くの時間を節約することができて、菜鳥の教程はとても悪くなくて、上でクリックしてリンクを開くことを見つけます
/span>html>
charset="utf-8">
</span>Bootstrap <span style="color:#e8bf6a;">
</span><span style="color:#e8bf6a;"> <link/><span style="color:#bababa;">rel=</span><span style="color:#a5c261;">"stylesheet" </span><span style="color:#bababa;">href=</span><span style="color:#a5c261;">"https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"</span><span style="color:#e8bf6a;">>
</span><span style="color:#e8bf6a;"> <script><span style="color:#bababa;">src=</span><span style="color:#a5c261;">"https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"</span><span style="color:#e8bf6a;">></script>
</span><span style="color:#e8bf6a;"> <script><span style="color:#bababa;">src=</span><span style="color:#a5c261;">"https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"</span><span style="color:#e8bf6a;">></script>
</span><span style="color:#e8bf6a;">
</span><span style="color:#e8bf6a;">
</span><span style="color:#e8bf6a;">
</span><span style="color:#e8bf6a;"><ul><span style="color:#bababa;">id=</span><span style="color:#a5c261;">"myTab" </span><span style="color:#bababa;">class=</span><span style="color:#a5c261;">"nav nav-tabs"</span><span style="color:#e8bf6a;">>
</span><span style="color:#e8bf6a;"> <li><span style="color:#bababa;">class=</span><span style="color:#a5c261;">"active"</span><span style="color:#e8bf6a;">>
</span><span style="color:#e8bf6a;"> <a><span style="color:#bababa;">href=</span><span style="color:#a5c261;">"#zero" </span><span style="color:#bababa;">data-toggle=</span><span style="color:#a5c261;">"tab"</span><span style="color:#e8bf6a;">>
</span><span style="color:#e8bf6a;"> </span>
<span style="color:#e8bf6a;"/></a>
</span><span style="color:#e8bf6a;"> </span></li>
</span><span style="color:#e8bf6a;"> <li>
</li></span><span style="color:#e8bf6a;"> <a><span style="color:#bababa;">href=</span><span style="color:#a5c261;">"#first" </span><span style="color:#bababa;">data-toggle=</span><span style="color:#a5c261;">"tab"</span><span style="color:#e8bf6a;">></span> <span style="color:#e8bf6a;"/></a>
</span><span style="color:#e8bf6a;">
</span><span style="color:#e8bf6a;"> <li>
</li></span><span style="color:#e8bf6a;"> <a><span style="color:#bababa;">href=</span><span style="color:#a5c261;">"#second" </span><span style="color:#bababa;">data-toggle=</span><span style="color:#a5c261;">"dropdown"</span><span style="color:#e8bf6a;">></span>
<span style="color:#e8bf6a;"><b><span style="color:#bababa;">class=</span><span style="color:#a5c261;">"caret"</span><span style="color:#e8bf6a;">></span></b></span></a>
</span><span style="color:#e8bf6a;">
</span><span style="color:#e8bf6a;"> <ul><span style="color:#bababa;">class=</span><span style="color:#a5c261;">"dropdown-menu"</span><span style="color:#e8bf6a;">>
</span><span style="color:#e8bf6a;"> <li><a><span style="color:#bababa;">href=</span><span style="color:#a5c261;">"#s_1" </span><span style="color:#bababa;">tabindex=</span><span style="color:#a5c261;">"-1" </span><span style="color:#bababa;">data-toggle=</span><span style="color:#a5c261;">"tab"</span><span style="color:#e8bf6a;">></span> <span style="color:#e8bf6a;"/></a></li>
</span><span style="color:#e8bf6a;"> <li><a><span style="color:#bababa;">href=</span><span style="color:#a5c261;">"#s_2" </span><span style="color:#bababa;">tabindex=</span><span style="color:#a5c261;">"-1" </span><span style="color:#bababa;">data-toggle=</span><span style="color:#a5c261;">"tab"</span><span style="color:#e8bf6a;">></span> <span style="color:#e8bf6a;"/></a></li>
</span><span style="color:#e8bf6a;"> </span></ul>
</span><span style="color:#e8bf6a;">
</span><span style="color:#e8bf6a;"/></ul>
</span><span style="color:#e8bf6a;"><div><span style="color:#bababa;">id=</span><span style="color:#a5c261;">"myTabContent" </span><span style="color:#bababa;">class=</span><span style="color:#a5c261;">"tab-content"</span><span style="color:#e8bf6a;">>
</span><span style="color:#e8bf6a;"> <div><span style="color:#bababa;">class=</span><span style="color:#a5c261;">"tab-pane active" </span><span style="color:#bababa;">id=</span><span style="color:#a5c261;">"zero"</span><span style="color:#e8bf6a;">>
</span><span style="color:#e8bf6a;"> <p> </p></span>There is a good programer<span style="color:#e8bf6a;">
</span><span style="color:#e8bf6a;"> </span></div>
</span><span style="color:#e8bf6a;"> <div><span style="color:#bababa;">class=</span><span style="color:#a5c261;">"tab-pane fade" </span><span style="color:#bababa;">id=</span><span style="color:#a5c261;">"first"</span><span style="color:#e8bf6a;">>
</span><span style="color:#e8bf6a;"> </span> <span style="color:#e8bf6a;">
</span><span style="color:#e8bf6a;"> </span></div>
</span><span style="color:#e8bf6a;"> <div><span style="color:#bababa;">class=</span><span style="color:#a5c261;">"tab-pane fade" </span><span style="color:#bababa;">id=</span><span style="color:#a5c261;">"s_1"</span><span style="color:#e8bf6a;">>
</span><span style="color:#e8bf6a;"> </span> <span style="color:#e8bf6a;">
</span><span style="color:#e8bf6a;"> </span></div>
</span><span style="color:#e8bf6a;"> <div><span style="color:#bababa;">class=</span><span style="color:#a5c261;">"tab-pane fade" </span><span style="color:#bababa;">id=</span><span style="color:#a5c261;">"s_2"</span><span style="color:#e8bf6a;">>
</span><span style="color:#e8bf6a;"> </span> <span style="color:#e8bf6a;">
</span><span style="color:#e8bf6a;"> </span></div>
</span><span style="color:#e8bf6a;"/></div>
</span><span style="color:#e8bf6a;">
</span><span style="color:#e8bf6a;">
</span><span style="color:#e8bf6a;"/></span></span></span></code></pre>
<br/>
</div>
</div>
</div>
</div>