分页浏览的导航栏Bootstrap和js两种方法
生活随笔
收集整理的這篇文章主要介紹了
分页浏览的导航栏Bootstrap和js两种方法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1，Bootstrap寫法：
? ? 效果圖：
? ? ? ? ?
?
? ? ? ? 代碼：
?
? ? ??
<!doctype html> <html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus?"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title> 應用</title><link href="bootstrap.min.css" rel="stylesheet" style="test/css"><script src="jquery-2.2.3.min.js"></script><script src="bootstrap.min.js"></script></head> <body><br/><div class="container"><ul id="myTabs" class="nav nav-tabs"><li class="active"><a href="#home" data-toggle="tab">Home</a></li><li><a href="#profile" data-toggle="tab">Profile</a></li><li class="dropdown"><a href="#" id="myTabdrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown<span class="caret"></span></a><ul class="dropdown-menu" role="menu"><li><a href="#D1" tabindex="-1" data-toggle="tab">D1</a></li><li><a href="#D2" tabindex="-1" data-toggle="tab">D2</a></li></ul></li></ul> <div id="myTabContent" class="tab-content"><div class="tab-pane fade in active" id="home"><p>1</p></div><div class="tab-pane fade" id="profile"><p>2</p></div><div class="tab-pane fade" id="D1"><p>3</p></div><div class="tab-pane fade" id="D2"><p>4</p></div></div></div><!-- <script>// $("#myTabs a:last").tab("show");// $("#myTabs li:eq(0) a").tab("show"); //改變eq后面的數字就行，從0開始$("a[data-toggle='tab']").on("shown.bs.tab",function(e){alert("Hello");})</script> --></body> </html> View Code?
Js寫法：
? ?效果圖：
? ? ?晚上更新
? ??
?
轉載于:https://www.cnblogs.com/147258llj/p/5511649.html
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的分页浏览的导航栏Bootstrap和js两种方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 兼容低版本浏览器的一些方法
- 下一篇： ubuntu安装ros indigo