特效介绍
点击导航条，tab选项卡滑动切换到对应的内容的tab选项卡js插件。除了点击导航条可以切换之外，内容下面的左右按钮也可以实现切换效果。
使用方法
1、在head引入css.css和cfcoda.js两个文件
2、拷贝下面的html代码到您的html页面即可：
02 | <ul id="toolbar" class="navigation"> |
03 | <li id="home-tab"><a href="#" onclick="javascript:ScrollSection('home-pane', 'scroller', 'home-pane'); return false">Home</a></li> |
04 | <li id="about-tab"><a href="#" onclick="javascript:ScrollSection('about-pane', 'scroller', 'home-pane'); return false">About</a></li> |
05 | <li id="scripts-tab"><a href="#" onclick="javascript:ScrollSection('scripts-pane', 'scroller', 'home-pane'); return false">Scripts</a></li> |
06 | <li id="downloads-tab"><a href="#" onclick="javascript:ScrollSection('downloads-pane', 'scroller', 'home-pane'); return false">Downloads</a></li> |
07 | <li id="faq-tab"><a href="#" onclick="javascript:ScrollSection('faq-pane', 'scroller', 'home-pane'); return false">FAQ</a></li> |
08 | <li id="contact-tab"><a href="#" onclick="javascript:ScrollSection('contact-pane', 'scroller', 'home-pane'); return false">Contact</a></li> |
14 | <div class="section" id="home-pane"> |
15 | <img src="images/1.jpg" alt="网站模板" /> |
16 | <div>« <a href="javascript:ScrollArrow('left','toolbar','scroller','home-pane');">Contact</a> <a href="javascript:ScrollArrow('right','toolbar','scroller','home-pane');">About</a> »</div> |
18 | <div class="section" id="about-pane"> |
19 | <img src="images/2.jpg" alt="免费网站模板" /> |
20 | <div>« <a href="javascript:ScrollArrow('left','toolbar','scroller','home-pane');">Home</a> <a href="javascript:ScrollArrow('right','toolbar','scroller','home-pane');">Scripts</a> »</div> |
22 | <div class="section" id="scripts-pane"> |
23 | <img src="images/3.jpg" alt="小U顾盼" /> |
24 | <div>« <a href="javascript:ScrollArrow('left','toolbar','scroller','home-pane');">About</a> <a href="javascript:ScrollArrow('right','toolbar','scroller','home-pane');">Downloads</a> »</div> |
26 | <div class="section" id="downloads-pane"> |
27 | <img src="images/4.jpg" alt="顾盼" /> |
28 | <div>« <a href="javascript:ScrollArrow('left','toolbar','scroller','home-pane');">Scripts</a> <a href="javascript:ScrollArrow('right','toolbar','scroller','home-pane');">FAQ</a> »</div> |
30 | <div class="section" id="faq-pane"> |
31 | <img src="images/5.jpg" alt="tab选项卡" /> |
32 | <div>« <a href="javascript:ScrollArrow('left','toolbar','scroller','home-pane');">Downloads</a> <a href="javascript:ScrollArrow('right','toolbar','scroller','home-pane');">Contact</a> »</div> |
34 | <div class="section" id="contact-pane"> |
35 | <img src="images/6.jpg" alt="网站模板" /> |
36 | <div>« <a href="javascript:ScrollArrow('left','toolbar','scroller','home-pane');">FAQ</a> <a href="javascript:ScrollArrow('right','toolbar','scroller','home-pane');">Home</a> »</div> |
您可以根据需要，更改导航的大小，内容，样式等，做成您需要的效果。
