一个简单至极的Tab选项卡

所属分类:媒体-Tabs

 8211  28  查看评论 (5)
一个简单至极的Tab选项卡 ie兼容6

一个简单至极的Tab选项卡,支持加载网页

第一步:添加脚本和样式

<link type="text/css" rel="stylesheet" href="css/tabs.css"/>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/tabs.js"></script>

第二步:写一个选项卡

<div class='tabs' id="tabs">
        <ul class='horizontal'>
            <li rel="tab-1">information</li>
            <li rel="tab-2" relHref="T1.html">tab2</li>
            <li rel="tab-3" relHref="T2.html">tab3</li>
        </ul>
        <div rel='tab-1'><span>Change the tab to see that there is an animation.</span></div>
        <div rel='tab-2'><span>Tab 2</span></div>
        <div rel='tab-3'><span>Tab 3</span></div>
    </div>

注意:如果想默认第几个选项卡激活,直接添加有个class="sekectActive"就好,如:

<li rel="tab-2" relHref="T1.html" class="selectActive">tab2</li>

注意,如果不是加载网页的形式relHref不用写,如果需要这个属性写你对应的网页地址

第三步:写一个执行一个初始化函数

<script type="text/javascript">
    tabs_takes.init("tabs");
</script>
相关插件-Tabs

jQuery产品切换tab选项卡

特别好用的tab选项卡,可以轮播多张图片,无多余代码注释全
  Tabs
 6274  37

比较不错的选项卡插件

Material Design风格实用Tabs选项卡 jquery+css3+html5
  Tabs
 11461  79

基本jquery的菜单标签页选项插件(原创)

很容易将此插件集成到你的平台当中
  Tabs
 6357  51

京东首页的多重tab

京东首页的多重tab
  Tabs
 10756  50

讨论这个项目(5)回答他人问题或分享插件使用方法奖励jQ币

    Z.Y 0
    2017/12/11 15:37:31

    你好,我的点击单选按钮的时候出来一个tabs页签,一共三个,然后我用你这个,先把这三个隐藏,然后第一个按钮id等于1的时候展示第一个div和内容,再点击第二个按钮的时候tabs页时出来了,但是第一个tabs页往下拉,有第二个tabs的内容,是追加的,这是需要改哪吗?能回复我吗,谢谢

        葬梦0
        2017/12/11 21:14:25

        可以啊,虽然有些变了,看看js,应该容易改的

    回复
    丽卡 0
    2017/11/29 15:35:27

    也是不能兼容谷歌

    回复
    WenYuan 0
    2017/8/8 17:24:46

    谷歌和ie不支持加载T1.html,火狐可以。

        葬梦0
        2017/8/9 11:18:36

        测试过了,并没有任何问题,你换个电脑试一试,如果还有问题,请联系我

    回复
取消回复