41.选项卡插件——tabs
使用選項(xiàng)卡插件可以將<ul>中的<li>選項(xiàng)定義為選項(xiàng)標(biāo)題，在標(biāo)題中，再使用<a>元素的“href”屬性設(shè)置選項(xiàng)標(biāo)題對應(yīng)的內(nèi)容，它的調(diào)用格式如下：
$(selector).tabs({options});
selector參數(shù)為選項(xiàng)卡整體外圍元素，該元素包含選項(xiàng)卡標(biāo)題與內(nèi)容，options參數(shù)為tabs()方法的配置對象，通過該對象還能以ajax方式加載選項(xiàng)卡的內(nèi)容。
例如，在頁面中，添加選項(xiàng)卡的標(biāo)題和內(nèi)容元素，并綁定tabs插件，當(dāng)點(diǎn)擊標(biāo)題時(shí)，以選項(xiàng)卡的方式切內(nèi)容，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，在tabs()方法的配置對象中，通過“fx”屬性設(shè)置了選項(xiàng)卡切換時(shí)的效果，“event”屬性設(shè)置鼠標(biāo)也可以切換選項(xiàng)卡，因此，當(dāng)鼠標(biāo)在移動(dòng)至兩個(gè)選項(xiàng)卡標(biāo)題時(shí)，對應(yīng)內(nèi)容以動(dòng)畫的效果自動(dòng)切換。
?
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>選項(xiàng)卡插件</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">最喜歡的運(yùn)動(dòng)</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 //設(shè)置各選項(xiàng)卡在切換時(shí)的動(dòng)畫效果 39 fx: { opacity: "toggle", height: "toggle" }, 40 event: "click" //通過移動(dòng)鼠標(biāo)事件切換選項(xiàng)卡 41 }) 42 }); 43 </script> 44 </body> 45 </html>?
轉(zhuǎn)載于:https://www.cnblogs.com/binhuguang/p/4362349.html
超強(qiáng)干貨來襲 云風(fēng)專訪：近40年碼齡，通宵達(dá)旦的技術(shù)人生總結(jié)
以上是生活随笔為你收集整理的41.选项卡插件——tabs的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C/C++ 一段代码区分数组指针|指针数
- 下一篇： hbase集群安装和shell操作