Tab选项卡的切换

开发工具与关键技术DW，CSS，JavaScript
作者：陈梅
撰写时间：2019年2月17日
现在分享的是我以前老师布置的一份作业里的技术，Tab选项卡的切换，这个技术又是一个JavaScript鼠标点击事件，我们来看看代码部分的布局
| | |
在这里我用的是ul和li做好排列表格，也可以用th、td样式来定义的。列好五个按钮和五个选项，再用a标签使鼠标移进内容区的字体时可以换色，给按钮定义on的类。五个按钮和五个选项内容个定义个类，布局简单的布局一下就ok了。接着来看一下css的布局吧！


Css的布局都是我们已经熟悉到不能再熟悉的布局样式了，设计宽高，设计字体大小，外边距，内边距，背景颜色，浮动，定位，隐藏（display：none），还有个text-decoration，是下划线样式，有增加和去掉下划线的作用，在我分享这技术里是去掉a标签的下划线。Css样式布局大家都十分熟悉，在这我就不多说了。让我们进入重点——JavaScript吧！

JavaScript的鼠标点击事件，相信大家也比较熟悉。在这里，我写JavaScript时为了方便我忘记，所以在写JavaScript的过程中都标注好要写的内容是哪的，这是老师教我的呢！不但可以知道自己写什么，这个代码是哪的，还可以在我们忘记的时候看一下，加深记忆。我这里申明了两个变量，一个是获取切换按钮的变量，一个是切换内容的变量，然后再用了if和for循环进行对按钮和内容切换的判断。判断按钮是否切换，点击的按钮为高亮状态，内容是否切换，切换为按钮相应的内容。循环判断。下面来看一下效果。





我这里设计按钮的背景颜色比较浅，可能看得不是很清楚，但是内容区看的就很清楚了，因为对内容区的文字用的是a标签，所有鼠标移进内容区的每个文字都会变成红色。Tab选项卡的切换就这样就完成啦！