项卡

选项卡在js中是一个重要的知识点。他没有那么难，但在工作中却有重要的位置。几乎在每一个网站都能看到选项卡的实例。所以今天写一下选项卡的实现。我们设想有四个按钮分别来控制四个盒子当我们点击当前的按钮的时候，让对应的盒子显示，让其余的盒子隐藏。

点击选项后变换不同的内容

代码部分

第一部分

第二部分

小编比较直接，大家可以先收藏起来，然后用DW或者sublime敲一遍，遇到的任何问题都可以在评论区留言，小编会一一解答。

谢谢。

迎关注！

Tab(Module-Tabs)

Tab(Module-Tabs)，也称选项卡、页签。是指将多个分类内容放置在同一个布局块内，但每次只有一个分类的内容是可见的，当使用鼠标切换不同分类时，展示不同的内容。tab实现了在一定的空间中展示更多信息的功能，在一个区域内分门别类的展示信息，用户依据自身需求查看不同内容，同时tab的使用也使得网页的页面大小变得更加容易控制，在减小显示信息密度的同时不会牺牲信息数量。tab在目前的网页开发中得到了广泛的运用。

Tab(Module-Tabs)特点

整个tab布局在一个布局元素中，每一页有标题区和内容区两部分组成，每一个标题区都有唯一一个与之对应的内容区，通常必须有两页以上的分类区域用来切换，通过点击鼠标或者将鼠标移到标题区进行切换，正在显示的标题区高亮突出，每一个标题区存在选中和未选中两个状态，打开页面时默认显示第一个页面。

Tab(Module-Tabs)实现案列

HTML：在一个id为tabDiv，class为tab-div的容器中展示tab选项卡，该案列有三个切换区域分别为要闻、科技和社会，内容区域手动添加了html，一般内容区域的数据都是直接从后台调用过来的。在HTML结构中可以清楚的看到标题区、内容区和tab显示布局元素。

实现tab选项卡的HTML代码

CSS：通过css设置各个区域的显示样式，主要有将tab-div和tab元素设置为相对定位元素，设置内容区域的显示和隐藏状态，设置标题区域选中和未选中的样式，去除ul列表自带的显示效果。

实现tab选项卡的css代码

JavaScript：首先通过getElementById方法和getElementByTagName方法获取到需要处理的内容区和标题区dom对象，再用for循环遍历标题dom对象，先将所有标题的样式抹去（aList[j].className="";）,再为选中的标题区添加样式让其显示出来（this.className=“active”；），最后依据选中的标题区匹配相应的内容区，原理也是先将所有的内容区样式去除，再将要显示的匹配标题区的内容区显示出来。这段脚本中理解起来比较难的是this的使用，两次使用this均是指向for循环作用域中的aList[i]对象，从而实现标题区与内容区的匹配。

实现tab选项卡的JavaScript代码

关注回复关键词“tab”获取本文案列全部代码。

收藏转发请先关注，谢谢支持！

ello，大家好，暖宝又来给大家带来javascript干货，我们开始吧：

上效果图：

这是一个简易的tab选项卡

上图是tab选项卡的代码：

1.这是选项卡的思路就是用for循环循环遍历出每个tab按钮input的默认index，先在点击每个按钮的同时让按钮的class为空，让每个按钮对应的div全部隐藏，然后再让每个div按照按钮的index显示其对应的内容；

2.注意以下几个问题

1》innerHtml为元素对象放置元素的内容

2》arr[]为数组，arr[0]为元素的第0个元素，依次类推

3》例子代码中（this.index+1）为优先执行,若写成this.index+1，不加“（）”，则会依次输出index和1.

好了，今天的分享结束了，觉得有用的请点击暖夕H2关注暖宝哦