tab标签可以展示指定项目，清除tab效果并重建

操作方法

  • 01

  • 02

    <divclass="wrap"> <h2>Basic tabs example</h2> <divclass="set set-1"> <divclass="panel panel-1"> <h2>Panel 1</h2> <p><a href="/article_fenye_19.html">jquery 无刷新翻页</a> 本例与《jquery 翻页分页》的区别在于本例更实用,翻页数字太多的时候会隐藏中间的部分。数据库与《jquery 翻页分页》的数据库相同</p> <buttonclass="btn">Show tab 3</button> <buttonclass="destroy">Destroy</button> <buttonclass="apply">Apply</button> </div> <divclass="panel panel-2"> <h2>Panel 2</h2> <p>2</p> </div> <divclass="panel panel-3"> <h2>Panel 3</h2> <p>3</p> </div> <divclass="panel panel-4"> <h2>Panel 4</h2> <p>4</p> </div> </div> <h2>With callback on tab select</h2> <divclass="set set-2"> <divclass="panel panel-1"> <headerclass="heading">Panel 1</header> <p>1</p> <buttonclass="btn">Show tab 2</button> </div> <divclass="panel panel-2"> <headerclass="head">Panel 2</header> <p>2</p> </div> <divclass="panel panel-3"> <headerclass="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>

赞 (0)

相关推荐

  • Axure RP Pro 7.0怎么制作Tab标签效果?

    Axure RP Pro 能帮助网站需求设计者,快捷而简便的创建基于网站构架图的带注释页面示意图.操作流程图.以及交互设计,并可自动生成用于演示的网页文件和规格文件,从而可以将产品人员的想法快速准确的 ...

  • 用友U8操作教程：[24]指定项目核算科目

    本系列将以一个单位的经济业务详细介绍用友U8 V10.1软件的操作步骤.涉及到的板块有系统管理,档案设置,总账系统,薪资管理系统,固定资产系统,应收款管理系统,应付款管理系统,UFO报表系统等. 本篇 ...

  • QQ空间如何设置仅展示指定日期之前的动态

    很多时候,我们不太希望自己空间展示的动态被别人随意翻阅,所以就会对自己的动态进行设置,最好是直接对日期进行设置,那么QQ空间如何设置仅展示指定日期之前的动态呢?不会的小伙伴们一起来看看吧~ 操作方法 ...

  • 怎么通过Pr给视频指定区域添加马赛克效果

    怎么通过Pr给视频指定区域添加马赛克效果

    Pr是现在十分常用的一款视频编辑软件,有些新用户不知道怎么通过Pr给视频指定区域添加马赛克效果,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步打开电脑中的Pr软件,根据下图箭头所 ...

  • 三星galaxy tab s 10.5多少钱? 三星tab s 10.5报价及配置参数介绍

    三星galaxy tab s 10.5价格多少钱?如果你想了解关于三星tab s 10.5报价方面消息的话，可以来看下文哦~galaxy tab s 10.5亮点就是10.5英寸的2k屏幕，大家觉得哪 ...

  • 三星galaxy tab s2 8.0和三星galaxy tab s2 9.7哪个好

    三星galaxy tab s2平板售价分别为2888元起(8英寸版).3588元起(9.7英寸版). 三星galaxy tab s2平板一大特点是其轻薄的机身,9.7英寸和8.0英寸两种尺寸的机身厚度 ...

  • meta标签实现网页转换时的动画效果

    操作方法 01 使用meta标签,我们还可以在进入网页或者离开网页的一刹那实现动画效果,我们只要在页面的html代码中的<head></head>标签之间添加如下代码就可以了: ...

  • PPT中如何对指定内容设置动画效果?

    PPT中如何对指定内容设置动画效果?

  • Tab设计总结

    今天这篇文章来给大家分析一下tab.其实tab隶属于产品导航体系的一部分,所以你要了解tab,必须要它放在导航体系中来分析.希望这篇文章可以帮助大家以后更合理的去使用tab. tab的分类 为了更好的 ...