非常棒的Tab切换效果-tabulous

所属分类:媒体-Tabs

 157974  469  查看评论 (15)
分享到微信朋友圈
X
非常棒的Tab切换效果-tabulous ie兼容10

非常棒的Tab切换效果-tabulous

使用步骤

引用

 <script type="text/javascript" src="tabulous.js"></script>

html

<div id="tabs">
        <ul>
            <li><a href="#tabs-1" title="">Tab 1</a></li>
            <li><a href="#tabs-2" title="">Tab 2</a></li>
            <li><a href="#tabs-3" title="">Tab 3</a></li>
        </ul>
        <div id="tabs_container">
            <div id="tabs-1">
                <!--tab content-->
            </div>
            <div id="tabs-2">
                 ? <!--tab content-->  
            </div>
            <div id="tabs-3">
                 ? ?<!--tab content-->
            </div>
        </div><!--End tabs container-->
</div><!--End tabs-->

js

$(document).ready(function ($) {
 	 $('#tabs').tabulous({);
});


插件效果样式


$('#tabs').tabulous({
	effect: 'scale'
});


相关插件-Tabs

淡入淡出效果的TAB标签

淡入淡出效果的TAB标签,兼容所有浏览器。
  Tabs
 42698  315

jQueryBootstrap个性化响应式Tab

功能的话是可以点击切换的,要想有梯形的样子的话只是兼容ie10以上,或者可以使用背景图片达到相应效果
  Tabs
 28080  341

比较不错的选项卡插件

Material Design风格实用Tabs选项卡 jquery+css3+html5
  Tabs
 35614  388

移动可滑动切换tab选项卡

移动端头部任意多个滑动切换
  Tabs
 92172  534

讨论这个项目(15)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    天山兔子 0
    2021/1/26 12:07:06
    Tabs内容使用position定位,内容只能添加纯本文文字,不能添加超链接等内容,属于只是效果好看,却不实用的案例,可用性:0%,不建议下载! 回复
    彭宏丁 0
    2021/1/25 15:33:44
    光有效果却是能加文本 扩展性太差 回复
    回不去的曾经 0
    2020/7/6 16:42:46
    为什么我充值了还是下载不了
        BattleofLexington0
        2020/7/6 16:56:01
        刚测试可以正常下载,用浏览器直接下载,不要用迅雷。
    回复
    寒蝉・鸣泣・之时 0
    2019/5/23 11:40:47
    佛了,第一次见这么写代码的。给所有的a所有的div加事件,这是完全不考虑别人咋用啊 回复
    miss丶G 0
    2018/7/4 15:31:43
    这个tabs_container中的内容如果是动态添加的好像不能展示 它的高度为0 回复
    Alien 0
    2018/5/31 17:23:14
    tabs_container里面不能加div啊 回复
    ?l???r 0
    2018/3/8 17:17:59
    为啥加div就隐藏了呀
    回复
    caobo 0
    2018/3/8 16:42:42
    里面还不能够添加a标签 跳不出去啊,也不能div 之能用于纯文本的tab页面 不好 回复
    tudan110 0
    2017/11/2 19:25:53
    月舞云袖 0
    2017/9/28 18:03:25
    无法连接下下一个页面吗  回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复