jquery 選項卡插件jquery tab選項卡支持垂直選項卡滾動、水平選項卡滾動、自動選項卡切換等。



107 427 143



特效描述:選項卡插件 tab選項卡 垂直選項卡滾動 水平選項卡滾動 自動選項卡切換,jquery tab 插件制作一個垂直選項卡滾動、和水平選項卡滾動、自動選項卡切換、選項卡切換、是一款多功能jquery tab 插件,也是非常實用的jquery特效。

代碼結構

1. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/tab.lib.js"></script>

2. HTML代碼

<div class="cont">
<div class="main">
<h2>切換</h2>  
<h3>垂直滾動 點擊觸發</h3>  
    <div class="testtab" id="testtab">
    	<div id="tabtag" class="tabtag" style="position:relative;">
        	<ul>
            	<li class="cur">jquery 特效</li>
                <li>javascript 特效</li>
                <li>css 特效</li>
                <li>html5 特效</li>
            </ul>
        </div>
        <div id="tabcon" class="tabcon">
        	<div>
            	<ul> 
                    <li><a href="http://www.17sucai.com/">jquery特效制作banner圖片滾動播放、按鈕控制圖片滾動、選項卡等基于多功能jquery slide插件</a></li>
                    <li><a href="http://www.17sucai.com/">jQuery特效插件:Tablesorter 2.0 表格用戶體驗內容篩選與分頁篩選</a></li> 
                    <li><a href="http://www.17sucai.com/">jquery特效插件Validform制作一行代碼搞定整站的表單驗證</a></li>  
                    <li><a href="http://www.17sucai.com/">jquery特效制作 slide 圖片窗簾式滾動</a></li>                     
                </ul> 
            </div>
            <div>
            	<ul> 
                    <li><a href="http://www.17sucai.com/">javascript特效按鈕控制圖片左右自動滾動</a></li>
                    <li><a href="http://www.17sucai.com/">javascript特效多功能選項卡自動切換內容圖片延遲加載</a></li> 
                    <li><a href="http://www.17sucai.com/">javascript特效圖片滾動插件支持單排圖片上下滾動、圖片無縫滾動</a></li>  
                    <li><a href="http://www.17sucai.com/">javascript特效網頁banner制作焦點圖片切換帶按鈕和固定圖標控制圖片左右滾動</a></li>
				</ul>
            </div>
            <div>
            	<ul>
                    <li><a href="http://www.17sucai.com/">純CSS下拉菜單</a></li>
                    <li><a href="http://www.17sucai.com/">CSS3的動畫按鈕泡泡</a></li>
                    <li><a href="http://www.17sucai.com/">用CSS3更換一個確認對話框的jQuery</a></li>
                    <li><a href="http://www.17sucai.com/">使用jQuery制作更好的selcet選擇元素和CSS3</a></li>                    
                </ul>
            </div>
            <div>
            	<ul> 
                    <li><a href="http://www.17sucai.com/">制作CSS3和HTML5的一個單頁網站模板</a></li>
                    <li><a href="http://www.17sucai.com/">一個HTML5的幻燈片基于jQuery框架</a></li> 
                    <li><a href="http://www.17sucai.com/">旋轉幻燈片使用jQuery和CSS3</a></li>                  
                </ul>
            </div>
        </div>
    </div>
    <pre>
    $("#testtab").tab({tabId:"#tabtag", //切換控制器的ID
	tabTag:"li",  //切換控制器標簽
	conId:"#tabcon", //內容容器ID
	conTag:"div",  //容器標簽
	act:"click", //點擊觸發 也可以不設置 默認就為click 設置為 mouseover則為劃過
	effact: "scrolly" //效果為縱向滾動
	})
    </pre>
<h3>水平滾動 點擊觸發 設置起始顯示序列</h3>      
    <div class="testtab" id="testtab2">
    	<div id="tabtag2" class="tabtag" style="position:relative;">
        	<ul>
            	<li class="cur">jquery 特效</li>
                <li>javascript 特效</li>
                <li>css 特效</li>
                <li>html5 特效</li>
            </ul>
        </div>
        <div id="tabcon2">
        	<div>
            	<a href="http://www.17sucai.com/"><img width="620" height="340" alt="用jquery特效制作圖片金字塔式放大縮小展示" src="images/aa6d7f26f941d87728eb0716d36d9cbe.jpg" /></a>
            </div>
            <div>
            	<a href="http://www.17sucai.com/"><img width="620" height="340" alt="javascript特效圖片滾動插件支持單排圖片上下滾動、圖片無縫滾動" src="images/838718c6c6e0707250734cfe9e046cee.jpg" /></a>
            </div>
            <div>
            	<a href="http://www.17sucai.com/"><img width="620" height="340" alt="CSS3的動畫按鈕泡泡" src="images/df8440960f45b0ad68fe4d1c684e2acc.jpg" /></a>
            </div>
            <div>
            	<a href="http://www.17sucai.com/"><img width="620" height="340" alt="旋轉幻燈片使用jQuery和CSS3" src="images/6b87a0e9c81c16b2cd43bc4a2879c2d0.jpg" /></a>
            </div>
        </div>
    </div>
    <pre>
    $("#testtab2").tab({tabId:"#tabtag2", //切換控制器的ID
	tabTag:"li", //切換控制器標簽
	conId:"#tabcon2", //內容容器ID
	conTag:"div", //容器標簽
	act:"click", //點擊觸發 也可以不設置 默認就為click 設置為 mouseover則為劃過
	effact: "scrollx", //橫向滾動效果
	<strong>dft:2</strong> //設置起始顯示序列
	})
    </pre>
<h3>無效果 自動切換</h3>     
    <div class="testtab" id="testtab3">
    	<div id="tabtag3" class="tabtag" style="position:relative;">
        	<ul>
            	<li class="cur">jquery 特效</li>
                <li>javascript 特效</li>
                <li>css 特效</li>
                <li>html5 特效</li>
            </ul>
        </div>
        <div id="tabcon3" class="tabcon">
        	<div>
            	<ul> 
                    <li><a href="http://www.17sucai.com/">jquery特效制作banner圖片滾動播放、按鈕控制圖片滾動、選項卡等基于多功能jquery slide插件</a></li>
                    <li><a href="http://www.17sucai.com/">jQuery特效插件:Tablesorter 2.0 表格用戶體驗內容篩選與分頁篩選</a></li> 
                    <li><a href="http://www.17sucai.com/">jquery特效插件Validform制作一行代碼搞定整站的表單驗證</a></li>  
                    <li><a href="http://www.17sucai.com/">jquery特效制作 slide 圖片窗簾式滾動</a></li>                     
                </ul> 
            </div>
            <div>
            	<ul> 
                    <li><a href="http://www.17sucai.com/">javascript特效按鈕控制圖片左右自動滾動</a></li>
                    <li><a href="http://www.17sucai.com/">javascript特效多功能選項卡自動切換內容圖片延遲加載</a></li> 
                    <li><a href="http://www.17sucai.com/">javascript特效圖片滾動插件支持單排圖片上下滾動、圖片無縫滾動</a></li>  
                    <li><a href="http://www.17sucai.com/">javascript特效網頁banner制作焦點圖片切換帶按鈕和固定圖標控制圖片左右滾動</a></li>
				</ul>
            </div>
            <div>
            	<ul>
                    <li><a href="http://www.17sucai.com/">純CSS下拉菜單</a></li>
                    <li><a href="http://www.17sucai.com/">CSS3的動畫按鈕泡泡</a></li>
                    <li><a href="http://www.17sucai.com/">用CSS3更換一個確認對話框的jQuery</a></li>
                    <li><a href="http://www.17sucai.com/">使用jQuery制作更好的selcet選擇元素和CSS3</a></li>                    
                </ul>
            </div>
            <div>
            	<ul> 
                    <li><a href="http://www.17sucai.com/">制作CSS3和HTML5的一個單頁網站模板</a></li>
                    <li><a href="http://www.17sucai.com/">一個HTML5的幻燈片基于jQuery框架</a></li> 
                    <li><a href="http://www.17sucai.com/">旋轉幻燈片使用jQuery和CSS3</a></li>                  
                </ul>
            </div>
        </div>
    </div>
    <pre>
    $("#testtab3").tab({tabId:"#tabtag3",
	tabTag:"li",
	conId:"#tabcon3",
	conTag:"div",
	<strong>auto:true,</strong>
	act:"mouseover"
	})	
    </pre>
<h3>“slow” 緩慢滾動效果</h3>     
    <div class="testtab" id="testtab4">
    	<div id="tabtag4" class="tabtag" style="position:relative;">
        	<ul>
            	<li class="cur">jquery 特效</li>
                <li>javascript 特效</li>
                <li>css 特效</li>
                <li>html5 特效</li>
            </ul>
        </div>
        <div id="tabcon4">
        	<div>
            	<a href="http://www.17sucai.com/"><img width="620" height="340" alt="用jquery特效制作圖片金字塔式放大縮小展示" src="images/aa6d7f26f941d87728eb0716d36d9cbe.jpg" /></a>
            </div>
            <div>
            	<a href="http://www.17sucai.com/"><img width="620" height="340" alt="javascript特效圖片滾動插件支持單排圖片上下滾動、圖片無縫滾動" src="images/838718c6c6e0707250734cfe9e046cee.jpg" /></a>
            </div>
            <div>
            	<a href="http://www.17sucai.com/"><img width="620" height="340" alt="CSS3的動畫按鈕泡泡" src="images/df8440960f45b0ad68fe4d1c684e2acc.jpg" /></a>
            </div>
            <div>
            	<a href="http://www.17sucai.com/"><img width="620" height="340" alt="旋轉幻燈片使用jQuery和CSS3" src="images/6b87a0e9c81c16b2cd43bc4a2879c2d0.jpg" /></a>
            </div>
        </div>
    </div>
    <pre>
    $("#testtab4").tab({tabId:"#tabtag4",
	tabTag:"li",
	conId:"#tabcon4",
	conTag:"div",
	<strong>effact: "slow"</strong>
	})	
    </pre>
	<h3>普通選項卡</h3>     
    <div class="testtab" id="testtab5">
    	<div id="tabtag5" class="tabtag" style="position:relative;">
        	<ul>
            	<li class="cur">jquery 特效</li>
                <li>javascript 特效</li>
                <li>css 特效</li>
                <li>html5 特效</li>
            </ul>
        </div>
        <div id="tabcon5" class="tabcon">
        	<div>
            	<ul> 
                    <li><a href="http://www.17sucai.com/">jquery特效制作banner圖片滾動播放、按鈕控制圖片滾動、選項卡等基于多功能jquery slide插件</a></li>
                    <li><a href="http://www.17sucai.com/">jQuery特效插件:Tablesorter 2.0 表格用戶體驗內容篩選與分頁篩選</a></li> 
                    <li><a href="http://www.17sucai.com/">jquery特效插件Validform制作一行代碼搞定整站的表單驗證</a></li>  
                    <li><a href="http://www.17sucai.com/">jquery特效制作 slide 圖片窗簾式滾動</a></li>                     
                </ul> 
            </div>
            <div>
            	<ul> 
                    <li><a href="http://www.17sucai.com/">javascript特效按鈕控制圖片左右自動滾動</a></li>
                    <li><a href="http://www.17sucai.com/">javascript特效多功能選項卡自動切換內容圖片延遲加載</a></li> 
                    <li><a href="http://www.17sucai.com/">javascript特效圖片滾動插件支持單排圖片上下滾動、圖片無縫滾動</a></li>  
                    <li><a href="http://www.17sucai.com/">javascript特效網頁banner制作焦點圖片切換帶按鈕和固定圖標控制圖片左右滾動</a></li>
				</ul>
            </div>
            <div>
            	<ul>
                    <li><a href="http://www.17sucai.com/">純CSS下拉菜單</a></li>
                    <li><a href="http://www.17sucai.com/">CSS3的動畫按鈕泡泡</a></li>
                    <li><a href="http://www.17sucai.com/">用CSS3更換一個確認對話框的jQuery</a></li>
                    <li><a href="http://www.17sucai.com/">使用jQuery制作更好的selcet選擇元素和CSS3</a></li>                    
                </ul>
            </div>
            <div>
            	<ul> 
                    <li><a href="http://www.17sucai.com/">制作CSS3和HTML5的一個單頁網站模板</a></li>
                    <li><a href="http://www.17sucai.com/">一個HTML5的幻燈片基于jQuery框架</a></li> 
                    <li><a href="http://www.17sucai.com/">旋轉幻燈片使用jQuery和CSS3</a></li>                  
                </ul>
            </div>
        </div>
    </div>
    <pre>
    $("#testtab5").tab({tabId:"#tabtag5",
	tabTag:"li",
	conId:"#tabcon5",
	conTag:"div"
	})	
    </pre>
</div>
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動 滾動條 頁面滾動 滾動插件 滾動條插件 滾動條美化 滾動切換 滾動條切換 滑動選項卡 滑動切換 自動滾動圖片輪播 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 圖片滾動 圖片滾動條 選項卡自動切換
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子