导航控制的tab左右滑动切换选项卡

点击导航条，tab选项卡滑动切换到对应的内容的tab选项卡js插件。除了点击导航条可以切换之外，内容下面的左右按钮也可以实现切换效果。
1、在head引入css.css和cfcoda.js两个文件

2、拷贝下面的html代码到您的html页面即可：

<div id="toolbarwrap">
    <ul id="toolbar" class="navigation">
        <li id="home-tab"><a href="#" onclick="javascript:ScrollSection('home-pane', 'scroller', 'home-pane'); return false">Home</a></li>
        <li id="about-tab"><a href="#" onclick="javascript:ScrollSection('about-pane', 'scroller', 'home-pane'); return false">About</a></li>
        <li id="scripts-tab"><a href="#" onclick="javascript:ScrollSection('scripts-pane', 'scroller', 'home-pane'); return false">Scripts</a></li>
        <li id="downloads-tab"><a href="#" onclick="javascript:ScrollSection('downloads-pane', 'scroller', 'home-pane'); return false">Downloads</a></li>
        <li id="faq-tab"><a href="#" onclick="javascript:ScrollSection('faq-pane', 'scroller', 'home-pane'); return false">FAQ</a></li>
        <li id="contact-tab"><a href="#" onclick="javascript:ScrollSection('contact-pane', 'scroller', 'home-pane'); return false">Contact</a></li>
    </ul>
</div>
<div id="frame">
    <div id="scroller">
        <div id="content">
            <div class="section" id="home-pane">
                <img src="images/1.jpg" alt="网站模板" />
                <div>&laquo; <a href="javascript:ScrollArrow('left','toolbar','scroller','home-pane');">Contact</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:ScrollArrow('right','toolbar','scroller','home-pane');">About</a> &raquo;</div>
            </div>
            <div class="section" id="about-pane">
                <img src="images/2.jpg" alt="免费网站模板" />
                <div>&laquo; <a href="javascript:ScrollArrow('left','toolbar','scroller','home-pane');">Home</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:ScrollArrow('right','toolbar','scroller','home-pane');">Scripts</a> &raquo;</div>
            </div>
            <div class="section" id="scripts-pane">
                <img src="images/3.jpg" alt="小U顾盼" />
                <div>&laquo; <a href="javascript:ScrollArrow('left','toolbar','scroller','home-pane');">About</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:ScrollArrow('right','toolbar','scroller','home-pane');">Downloads</a> &raquo;</div>
            </div>
            <div class="section" id="downloads-pane">
                <img src="images/4.jpg" alt="顾盼" />
                <div>&laquo; <a href="javascript:ScrollArrow('left','toolbar','scroller','home-pane');">Scripts</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:ScrollArrow('right','toolbar','scroller','home-pane');">FAQ</a> &raquo;</div>
            </div>
            <div class="section" id="faq-pane">
                <img src="images/5.jpg" alt="tab选项卡" />
                <div>&laquo; <a href="javascript:ScrollArrow('left','toolbar','scroller','home-pane');">Downloads</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:ScrollArrow('right','toolbar','scroller','home-pane');">Contact</a> &raquo;</div>
            </div>
            <div class="section" id="contact-pane">
                <img src="images/6.jpg" alt="网站模板" />
                <div>&laquo; <a href="javascript:ScrollArrow('left','toolbar','scroller','home-pane');">FAQ</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:ScrollArrow('right','toolbar','scroller','home-pane');">Home</a> &raquo;</div>
            </div>
        </div>
    </div>
</div>

您可以根据需要，更改导航的大小，内容，样式等，做成您需要的效果。


部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！