插件描述：一个简单至极的Tab选项卡，支持加载网页
一个简单至极的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>
PREVIOUS:
NEXT:
相关插件-Tabs
讨论这个项目（17）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约
??ふ※爱恋 0
2019/4/28 16:24:17
<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>
这块是白色背景再套一层加wp就没效果了，需要改js吗
不离亨 0
2019/1/22 16:02:17
-
为什么换成div就不显示了呢，不是纯文本的都不展示啊，请问咋回事
不忘初心0
2019/4/11 17:32:16
-
我试了一下，如果你把div去掉的话，图片也是可以显示的
. 0
2018/8/2 15:44:20
-
您好，为什么改了id就无法点击了
葬梦1
2018/8/2 15:45:23
<script type="text/javascript">
tabs_takes.init("tabs");
</script>tabs就是id，更改了，就无法使用了
Z.Y 0
2017/12/11 15:37:31
你好，我的点击单选按钮的时候出来一个tabs页签，一共三个，然后我用你这个，先把这三个隐藏，然后第一个按钮id等于1的时候展示第一个div和内容，再点击第二个按钮的时候tabs页时出来了，但是第一个tabs页往下拉，有第二个tabs的内容，是追加的，这是需要改哪吗？能回复我吗，谢谢
葬梦0
2017/12/11 21:14:25
可以啊，虽然有些变了，看看js，应该容易改的
WenYuan 0
2017/8/8 17:24:46
谷歌和ie不支持加载T1.html，火狐可以。
葬梦0
2017/8/9 11:18:36
测试过了，并没有任何问题，你换个电脑试一试，如果还有问题，请联系我
😃
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
😃
取消回复
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
