一个简单至极的Tab选项卡

所属分类:媒体-Tabs

 10028  32  查看评论 (7)
一个简单至极的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

jQueryBootstrap个性化响应式Tab

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

Tab+无缝滚动双重组合

Tab标签切换+无缝滚动组合
  Tabs
 20409  87

jQuery功能展示Tabs

jQuery功能展示插件tabswitch.js
  Tabs
 13408  235

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

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

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

    jasmineq22 0
    2018/3/27 11:32:22
    ie预览不出来,火狐谷歌可以
        葬梦0
        2018/3/27 11:33:31
        哪个版本
    回复
    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

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

    回复
取消回复