一个简单至极的Tab选项卡

所属分类:媒体-Tabs

 6147  25  查看评论 (2)
一个简单至极的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功能展示Tabs

jQuery功能展示插件tabswitch.js
  Tabs
 10642  198

响应式tab选项卡布局

jQuery响应式tab选项卡布局
  Tabs
 8538  59

仿原生选项卡切换面板支持手势滑动

本插件是基于swiper插件进行封装的仿原生安卓ios的切换面板效果插件
  Tabs
 9544  99

jQueryBootstrap个性化响应式Tab

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

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

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

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

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

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

    回复
取消回复