我爱模板网 > 特效插件 > 选项卡特效 >  导航控制的tab左右滑动切换选项卡正文

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

特效介绍
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>
您可以根据需要,更改导航的大小,内容,样式等,做成您需要的效果。


部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!
上一篇:可自动切换的tab选项卡Easy Tabs 1.2 下一篇:自适应宽度tab选项卡
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
选择头像:
最新评论

猜你喜欢