tab标签可以显示指定项目,清除tab效果并重建
XML/HTML Code
- <div class="wrap">
- <h2>Basic tabs example</h2>
- <div class="set set-1">
- <div class="panel panel-1">
- <h2>Panel 1</h2>
- <p><a href="http://freejs.net/article_fenye_19.html">jquery 无刷新翻页</a>
- 本例与《jquery 翻页分页》的区别在于本例更实用,翻页数字太多的时候会隐藏中间的部分。数据库与《jquery 翻页分页》的数据库相同</p>
- <button class="btn">Show tab 3</button>
- <button class="destroy">Destroy</button>
- <button class="apply">Apply</button>
- </div>
- <div class="panel panel-2">
- <h2>Panel 2</h2>
- <p>2</p>
- </div>
- <div class="panel panel-3">
- <h2>Panel 3</h2>
- <p>3</p>
- </div>
- <div class="panel panel-4">
- <h2>Panel 4</h2>
- <p>4</p>
- </div>
- </div>
- <h2>With callback on tab select</h2>
- <div class="set set-2">
- <div class="panel panel-1">
- <header class="heading">Panel 1</header>
- <p>1</p>
- <button class="btn">Show tab 2</button>
- </div>
- <div class="panel panel-2">
- <header class="head">Panel 2</header>
- <p>2</p>
- </div>
- <div class="panel panel-3">
- <header class="h1">Panel 3</header>
- <p>3</p>
- </div>
- </div>
- </div>
JavaScript Code
- <script>
- $(function() {
- $(".set-1").mtabs();
- $(".set-2").mtabs({
- tab_text_el: ".heading, .head, header",
- onTabSelect: function(idx) {
- console.log("Selected tab is: " + idx);
- },
- onReady: function () {
- console.log('Set 2 ready!');
- }
- });
- $('.set-1 .panel-1 .btn').on('click', function(event) {
- $('.set-1').mtabs('show', 2);
- event.preventDefault();
- });
- $('.set-1 .panel-1 .destroy').on('click', function(event) {
- $('.set-1').mtabs('destroy');
- event.preventDefault();
- });
- $('.set-1 .panel-1 .apply').on('click', function(event) {
- $('.set-1').mtabs();
- event.preventDefault();
- });
- $('.set-2 .panel-1 .btn').on('click', function(event) {
- $('.set-2').mtabs('show', 1);
- event.preventDefault();
- });
- });
- </script>
相关推荐
tab 标签切换效果网页特效 tab 标签切换效果网页特效 tab 标签切换效果网页特效 tab 标签切换效果网页特效 tab 标签切换效果网页特效
本文实例为大家分享了Bootstrap实现tab标签切换效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link...
Android项目Tab标签
TAB标签 大型网站 使用的TAB标签例子 下了不后悔
纯CSS实现的tab标签切换代码,其实是由六个html文件组成,相互切换的效果。懒人之家推荐下载
各种切换效果的tab标签,效果挺多,还有嵌套的tab~
tab标签切换效果,标签切换部分背景可以设置多种色调,这是与其他tab标签有所区别的地方。懒人之家推荐下载
JavaScript实现的带左右箭头的tab标签代码,tab里面可以放html代码,不限于文字
javascript tab标签 不规则TAB选项卡效果源码
jQuery Tab标签插件,让您可以方便的在页面中创建标签效果。
js Tab标签页
tab标签按钮居于上下左右四个方向的切换效果,支持增加或者删除tab标签,懒人之家推荐下载
触屏滑动swiper选项卡tab标签切换效果 触屏滑动swiper选项卡tab标签切换效果 触屏滑动swiper选项卡tab标签切换效果 触屏滑动swiper选项卡tab标签切换效果
javascript实现的淡入淡出效果的TAB标签源码
从国外网站直接翻译过来的一款幻灯片样式,切换效果用tab标签实现,这样就集成了两种效果。火狐下效果最好,IE浏览器下效果也可以使用
tab标签切换代码,切换内容为分辨率较大的图片,js代码会自动调用图片滑动,达到小窗口大视野的效果。相关链接:js实现自适应宽度的tab标签导航。懒人之家推荐下载
【Jquery经典特效6】js实现tab标签切换效果
html+javascript技术 ,实现tab标签的效果,适合新手下载下来学习研究
伪雅虎Tab标签
功能介绍: 1、可以换皮肤、其中住框架、具体页面可以统一使用皮肤。 2、tab页标题有右键菜单,新开、...tabControl新开一个页面实际上是通过JS在主显示区域建立一个iframe 把这个iframe的src 指向我们指定的页面。