41.选项卡插件——tabs
生活随笔
收集整理的這篇文章主要介紹了
41.选项卡插件——tabs
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
使用選項卡插件可以將<ul>中的<li>選項定義為選項標題，在標題中，再使用<a>元素的“href”屬性設置選項標題對應的內容，它的調用格式如下：
$(selector).tabs({options});
selector參數為選項卡整體外圍元素，該元素包含選項卡標題與內容，options參數為tabs()方法的配置對象，通過該對象還能以ajax方式加載選項卡的內容。
例如，在頁面中，添加選項卡的標題和內容元素，并綁定tabs插件，當點擊標題時，以選項卡的方式切內容，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，在tabs()方法的配置對象中，通過“fx”屬性設置了選項卡切換時的效果，“event”屬性設置鼠標也可以切換選項卡，因此，當鼠標在移動至兩個選項卡標題時，對應內容以動畫的效果自動切換。
?
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>選項卡插件</title> 5 <link href="http://www.imooc.com/data/jquery-ui.css" rel="stylesheet" type="text/css" /> 6 <link href="style.css" rel="stylesheet" type="text/css" /> 7 <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script> 8 <script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script> 9 </head> 10 11 <body> 12 <div id="divtest"> 13 <div id="tabs"> 14 <ul> 15 <li><a href="#tabs-1">最愛吃的水果</a></li> 16 <li><a href="#tabs-2">最喜歡的運動</a></li> 17 </ul> 18 <div id="tabs-1"> 19 <p>橘子</p> 20 <p>香蕉</p> 21 <p>葡萄</p> 22 <p>蘋果</p> 23 <p>西瓜</p> 24 </div> 25 <div id="tabs-2"> 26 <p>足球</p> 27 <p>散步</p> 28 <p>籃球</p> 29 <p>乒乓球</p> 30 <p>騎自行車</p> 31 </div> 32 </div> 33 </div> 34 35 <script type="text/javascript"> 36 $(function () { 37 $("#tabs").tabs ({ 38 //設置各選項卡在切換時的動畫效果 39 fx: { opacity: "toggle", height: "toggle" }, 40 event: "click" //通過移動鼠標事件切換選項卡 41 }) 42 }); 43 </script> 44 </body> 45 </html>?
轉載于:https://www.cnblogs.com/binhuguang/p/4362349.html
超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術人生總結
以上是生活随笔為你收集整理的41.选项卡插件——tabs的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C/C++ 一段代码区分数组指针|指针数
- 下一篇： hbase集群安装和shell操作