文本展示了使用jquery插件實現tab選項卡切換的方法,示例效果網址:
http:///keleyi/phtml/tabswitch/index.htm
所用插件使用說明:
* 應用對象必須為標簽按鈕的直接父元素，且父元素內不包含其他非按鈕元素
* example:
$( ".menus_wrap" ).tabso({
cntSelect:".content_wrap",
tabEvent:"mouseover"
});
* cntSelect：內容塊的直接父元素的 jq 選擇器
* tabEvent：觸發事件名
* tabStyle：切換方式。可取值："normal" "fade" "move" "move-fade" "move-animate"
* direction：移動方向。可取值："left" "top" （tabStyle為"move"或"move-fade" "move-animate"時有效）
* aniMethod：動畫方法（特殊效果需插件（如：easing）支持，tabStyle為"move-animate"時有效）
* aniSpeed：動畫速度
* onStyle：菜單選中樣式名
以下是代碼:
<script type="text/javascript" src="http:///keleyi/pmedia/jquery-1.9.1.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif,"宋體";}
a{color:#333;text-decoration:none;}
a:hover{color:#3366cc;text-decoration:underline;}
/* demo */
.demo{width:686px;margin:40px auto;position:relative;}
.demo h2{font-size:16px;height:44px;color:#3366cc;margin-top:20px;}
.demo dl dt{font-size:14px;color:#ff6600;margin-top:30px;font-weight:800;}
.demo dl dt,.demo dl dd{line-height:22px;}
/* tabbtn */
.tabbtn{height:30px;background:url(http:///keleyi/phtml/tabswitch/images/tabbg.gif) repeat-x;border-left:solid 1px #ddd;border-right:solid 1px #ddd;}
.tabbtn li{float:left;position:relative;margin:0 0 0 -1px;}
.tabbtn li a{display:block;float:left;height:30px;line-height:30px;overflow:hidden;width:108px;text-align:center;font-size:12px;cursor:pointer;}
.tabbtn li.current{border-left:solid 1px #d5d5d5;border-right:solid 1px #d5d5d5;border-top:solid 1px #c5c5c5;}
.tabbtn li.current a{border-top:solid 2px #ff6600;height:27px;line-height:27px;background:#fff;color:#3366cc;font-weight:800;}
/* tabcon */
.tabcon{border-width:0 1px 1px 1px;border-color:#ddd;border-style:solid;position:relative;/*必要元素*/height:180px;overflow:hidden;}
.tabcon .subbox{position:absolute;/*必要元素*/left:0;top:0;}
.tabcon .sublist{padding:5px 10px;height:170px;}
/* sublist */
.sublist{padding:10px;}
.sublist li{height:28px;line-height:28px;font-size:12px;}
.sublist li span{margin:0 5px 0 0;font-family:"宋體";font-size:12px;font-weight:400;color:#ddd;}
</style>
<div class="demo">
<h2>Jquery選項卡切換效果</h2>
<ul class="tabbtn" id="normaltab">
<li class="current"><a href="http:///menu/jquery/">jquery 特效</a></li>
<li><a href="http:///menu/javascript/">javascript</a></li>
<li><a href="http:///menu/mvc/">MVC</a></li>
<li><a href="http:///menu/net/">.NET</a></li>
</ul><!--tabbtn end-->
<div class="tabcon" id="normalcon">
<div class="sublist">
<ul>
<li><span>▪</span><a href="http:///a/bjac/768f469b95b61487.htm" title="" target="_blank" >單行文字間歇向上滾動</a></li>
<li><span>▪</span><a href="http:///a/bjac/ed5eb8c2959c619e.htm" title="" target="_blank" >滾動頁面時DIV到達頂部時固定在頂部</a></li>
<li><span>▪</span><a href="http:///a/bjac/a6d651710217f7a0.htm" title="" target="_blank" >使用jQuery UI修飾title屬性的氣泡懸浮框</a></li>
<li><span>▪</span><a href="http:///a/bjac/bf0eb8c02085b10d.htm" title="" target="_blank" >jquery清空textarea等輸入框</a></li>
<li><span>▪</span><a href="http:///a/bjac/939631bb07adb4dc.htm" title="" target="_blank" >jquery關燈特效</a></li>
<li><span>▪</span><a href="http:///a/bjac/f4a6f78d74a251c5.htm" title="" target="_blank" >jquery根據滾動像素顯示隱藏頂部導航條</a></li>
<li><span>▪</span><a href="http:///a/bjac/7e8897e5ec0849e9.htm" title="" target="_blank" >可改變大小DIV層</a></li>
</ul>
</div><!--tabcon end-->
<div class="sublist">
<ul>
<li><span>▪</span><a href="http:///a/bjac/e7f4d99c87604a8.htm" title="" target="_blank" >JS Trim()</a></li>
<li><span>▪</span><a href="http:///a/bjac/5d7f4ac2efa72d30.htm" title="" target="_blank" >菜單滾動至頂部後固定</a></li>
<li><span>▪</span><a href="http:///a/bjac/4f6d3873d0571805.htm" title="" target="_blank" >HTML5時鐘</a></li>
<li><span>▪</span><a href="http:///a/bjac/ceb3c274df032ed5.htm" title="" target="_blank" >javascript onmousedown 事件</a></li>
<li><span>▪</span><a href="http:///a/bjac/a6e756c811719fff.htm" title="" target="_blank" >在圖片上顯示左右箭頭的翻頁代碼</a></li>
<li><span>▪</span><a href="http:///dev/f1d8e1f2f1c95bc0.htm" title="" target="_blank" >window.open的頁面刷新上層頁面</a></li>
</ul>
</div><!--tabcon end-->
<div class="sublist">
<ul>
<li><span>▪</span><a href="http:///a/bjac/eb6f273eb3c4cd07.htm" title="在ASP.NET MVC 3 中自定義AuthorizeAttribute時需要注意的頁面緩存問題" target="_blank" >在ASP.NET MVC 3 中自定義AuthorizeAttribute時需要注意的頁面緩存問題</a></li>
<li><span>▪</span><a href="http:///a/bjac/4064796bf1f324c8.htm" title="" target="_blank" >留言板：ASP.NET MVC4實例</a></li>
<li><span>▪</span><a href="http:///a/bjac/2916901353b081f1.htm" title="" target="_blank" >留言板介紹</a></li>
<li><span>▪</span><a href="http:///a/bjac/1a9487bbb1cbfc50.htm" title="MVC：從客戶端中檢測到有潛在危險的 Request.Form 值 的解決方法" target="_blank" >MVC：從客戶端中檢測到有潛在危險的 Request.Form 值 的解決方法</a></li>
<li><span>▪</span><a href="http:///a/bjac/101639c1eb1e991b.htm" title="" target="_blank" >Html.ActionLink重載</a></li>
<li><span>▪</span><a href="http:///a/bjac/781ba7719ce323f.htm" title="" target="_blank" >ASP.NET MVC4中使用AJAX</a></li>
</ul>
</div><!--tabcon end-->
<div class="sublist">
<ul>
<li><span>▪</span><a href="http:///dev/beb40909418eb322.htm" title="" target="_blank" >WinForm 子窗體居中於父窗體代碼</a></li>
<li><span>▪</span><a href="http:///dev/e52563d8ef0c81dd.htm" title="" target="_blank" >.NET常用正則表達式</a></li>
<li><span>▪</span><a href="http:///dev/b9c46b55ed4b6e0d.htm" title="" target="_blank" >WinForm窗體最大化代碼</a></li>
<li><span>▪</span><a href="http:///dev/887a9ad6042c676.htm" title="" target="_blank" >saveFileDialog 保存文件的後綴</a></li>
<li><span>▪</span><a href="http:///dev/b6539b6c4146cc53.htm" title="" target="_blank" >ASP.NET驗證碼生成類</a></li>
<li><span>▪</span><a href="http:///dev/cb809a6fd56325b8.htm" title="" target="_blank" >tabcontrol 切換(聚焦)選項卡</a></li>
<li><span>▪</span><a href="http:///dev/908c6faf63374532.htm" title="" target="_blank" >.NET Winform 讓picturebox出現滾動條</a></li>
</ul>
</div><!--tabcon end-->
</div><!--tabcon end-->
</div>
<script type="text/javascript" src="http:///keleyi/phtml/tabswitch/jquerytab..js"></script>
<script type="text/javascript">
$(document).ready(function ($) {
//默認選項卡切換
$("#normaltab").tabso({
cntSelect: "#normalcon",
tabEvent: "mouseover",
tabStyle: "normal"
});
});
</script>