不能随意切换的Tab选项卡页面

…………………………………………………………………………………………………
开发工具与关键技术：Visual Studio 2015 C#

作者：林敏静

撰写时间：2019年7月13日

…………………………………………………………………………………………………
Tab选项卡相信大家都有写过，昨天我搭页面也有需要用到Tab选项卡，我使用了layui插件（为了便捷），但是发现layui里的Tab选项卡不太符合项目需求，原来的Tab选项卡它是点击选项卡标题是可以随意切换的，但是我这里的项目需求的是通过点击下一步的按钮才能切换到下一张选项卡片（不是在一个限制宽高的小框框里，而是在当前的一整个页面上），也就是带有步骤性质的，所以我只能放弃使用layui插件，按照需求重新去写了一个。不知道大家有没有遇到过这种需求，所以这里就来同大家分享一下，首先我们来看具体实现的效果，如下图：

既然能切换到下一张选项卡片同样也能够切换回去前一张选项卡片的，同理，通过点击上一步按钮回到前一张选项卡片，如下图：

源代码跟写Tab选项卡一样的，就是点击事件不在选项卡片的标题那里而已，这里就不多说了，我们来看jQuery代码部分，关乎到jQuery基础的样式篇，如下图：

这个过程就是点击下一步按钮，就把当前的选项卡片隐藏起来，把下一张选项卡片显示出来，同理,点击上一步按钮，就会返回上一张选项卡片，我这里还给了个选项卡卡片标题的一些属性样式，就是切换到哪张选项卡片，对应的选项卡标题的字体就会加粗，而且会出现颜色较深的下划线。

由上面jQuery代码就可以知道这个效果主要是通过改变一些元素样式来实现的，上面使用到了.css()和.addClass(){.removeClass()}，都是设置样式，它们之间存在着什么的区别呢？那么这里就顺带来讲一下，（以下诠释内容来源于课堂学习笔记jQueryBasics），先看它们各自使用的方法，如下文：

.css() 方法：获取元素样式属性的计算值或者设置元素的CSS属性

获取：

.css(propertyName) ：获取匹配元素集合中的第一个元素的样式属性的计算值

.css(propertyNames)：传递一组数组，返回一个对象结果

设置：

.css(propertyName,value)：设置CSS

.css(propertyName,function)：可以传入一个回调函数，返回取到对应的值进行处理

.css(properties)：可以传一个对象，同时设置多个样式

.addClass( className )方法：

.addClass(className)：为每个匹配元素所要增加的一个或多个样式名

.addClass(function(index,currentClass))：这个函数返回一个或更多用空格隔开的要增加的样式名

注意事项：.addClass()方法不会替换一个样式类名，它只是简单的添加一个样式类名到元素上

.removeClass( )方法，为删除(移除)样式，与.addClass()方法相反，但同理。

接着就来讲.css()与.addClass()设置样式的区别，请看下文：

可维护性：

.addClass()的本质是通过定义个class类的样式规则，给元素添加一个或多个类，而css方法是通过JavaScript大量代码进行改变元素的样式，通过.addClass()我们可以批量的给相同的元素设置统一规则，变动起来比较方便，可以统一修改删除。如果通过.css()方法就需要指定每一个元素是一一的修改，日后维护也要一一的修改，比较麻烦。

灵活性：

通过.css()方式可以很容易动态的去改变一个样式的属性，不需要在去繁琐的定义个class类的规则。一般来说在不确定开始布局规则，通过动态生成的HTML代码结构中，都是通过.css()方法处理的

样式值：

.addClass()本质只是针对class的类的增加删除，不能获取到指定样式的属性的值，.css()可以获取到指定的样式值。

样式的优先级：

css的样式是有优先级的，当外部样式、内部样式和内联样式同一样式规则同时应用于同一个元素的时候，优先级如：外部样式 < 内部样式 < 内联样式

.addClass()方法是通过增加class名的方式，那么这个样式是在外部文件或者内部样式中先定义好的，等到需要的时候在附加到元素上，通过.css()方法处理的是内联样式，直接通过元素的style属性附加到元素上的，通过.css方法设置的样式属性优先级是要高于.addClass方法的。

凡事都两面性（甚至多面性），所以.addClass与.css方法呢是各有利弊的，一般是静态的结构，都确定了布局的规则，就可以用addClass的方法，增加统一的类规则。如果是动态的HTML结构，在不确定规则，或者经常变化的情况下，一般多考虑.css()方式。

那么本篇学习文章就分享到这里啦！若有不足的地方，还望请多多指教！

不能随意切换的Tab选项卡页面相关推荐

html如何实现选项卡切换思路,Tab选项卡切换完整思路及实现，值得珍藏
原标题:Tab选项卡切换完整思路及实现,值得珍藏这篇文章是从微信上转载过来的,原文作者是"Java实例解析",文章内容很棒,只是这个作者可能是一时看不到效果,所以没更新几篇就放弃 ...
Tab选项卡切换效果JavaScript汇总
tab切换在现在的网页上,真是十分的常用呀.但是tab切换的JavaScript实现却有很多需要注意的地方,如何用最少的代码,最灵活的实现.这里收集了37个tab实现的JavaScript代码,在此备 ...
tab weui 页面切换_WeUI教程 - loadmore、msg、tab选项卡组件
loadmore 加载更多 Loadmore 加载更多正在加载暂无数据小程序下拉刷新,下拉加载更多的教程(29.30节) https://ke.qq.com/course/183926#tuin ...
layui tab选项卡外部html页面,layui的Tab选项卡知识
layui的公共类: lay-filter=" " 事件过滤器.你可能会在很多地方看到他,他一般是用于监听特定的自定义事件.你可以把它看作是一个ID选择器 layui的公共属性: ...
iOS开发-iPad侧边栏Tab选项卡切换
Android中习惯了叫侧边栏,iOS中如果不习惯侧边栏称呼的话可以叫dock,侧边栏的切换,类似于Android中的底部导航栏的切换,iPad尺寸大了一些,导航的栏目放在侧边会显示的更好耐看一些.选 ...
[Layui]主页tab选项卡操作(刷新页面，刷新选项卡，关闭，关闭其他，全部关闭)
主页tab选项卡操作(刷新页面,刷新选项卡,关闭,关闭其他,全部关闭) 效果如下: CSS <style>.layui-tab-item {height: 100%;width: 100% ...
基于jQuery实现tab选项卡【js实现页签切换】
任务描述本关任务:用jquery实现一个tab切换的功能. 效果图如下: 相关知识为了完成本关任务,你需要掌握:1.层次选择器,2.方法show和hide, 3.操作css类的方法. 层次选择器 ...
layui获取tab页id_LayUI的Tab选项卡切换显示对应数据
LayUI tab选项卡 + 分页展示实现 Tab选项卡切换显示对应数据要求:实现tab选项卡改变的同时展示数据也跟着改变实现条件: 1.选项卡[官网 – 文档/示例 – 页面元素 – 选项卡] ...
tab选项卡转换html,前端开发tab选项卡切换各种解决方案
前端开发软件ide| tab切换,做前端的各位大神再熟悉不过,因为运用的场合太多,所以大家可能都不屑于去关心了.不晓得大家遇到这种时是自己马上梳理逻辑写一次呢,还是用已有的模板或自己的库,今天我对自己 ...

不能随意切换的Tab选项卡页面

不能随意切换的Tab选项卡页面

不能随意切换的Tab选项卡页面相关推荐

最新文章

热门文章