js-tab选项卡

说到tab，顾名思义就是切换不同的内容分类。学过前端的都知道tab可以通过很多方式实现。最近跟师傅学了一个，很简单实用。

首先，先看结果

第二，可以按图布局。首先，上面的标签和下面的内容，

需要注意的是，点击上面A标签的链接，会一一对应下面div的id。

第三，是最重要的js部分。

这个地方可以分为几个阶段

1.首先，必须有一个事件来触发点击

2.获取与内容对应的A标签的href，这样就可以显示或隐藏以下内容，

3.通过唯一的活动类切换您想要的内容

第四，添加css，这样就差不多完成了

这里根据你的需要设置，重点是js

5.这么简单的小程序就快完成了。但是你要对自己的代码负责，所以测试也很重要。

1.首先，点击的选项会有偏差，要适当增加一些判断，只有点击A标签才能触发

注意：标记名必须大写，例如：标记

2.还有一个地方需要优化。您会发现，在第一个选项卡上，如果您单击当前选项卡，程序将再次执行。虽然看不到，但最好优化一下这个。

点击就判断。

下面附上我的源代码。希望大家一起学习。请随时给出建议和回复。

！DOCTYPE html html head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=设备宽度，初始比例=1，最小比例=1，最大比例=1，User-scalable=no '/title tab/title style type=' text/CSS ' * { font-family : simhei；} .选项卡组{ padding: 1em 0em} .tab-group a { padd : 1em 2em；color: # 666文本装饰：无；} .tab-group . active { padd : 1em 2em；背景技术： # 999；color: # fff} .内容组{ width : 31.7%；高度：10毫米；背景技术： # 999；color: # fff} .content-group . content-item { display : none；} .content-group . active { display : inline-block；}/style/head body Nav class=' tab-group ' A href=' item 01 ' rel=' external nofollow ' class=' tab-item active '计算机/A href=' item 02 ' rel=' external nofollow ' class=' item 03 ' rel=' external nofollow ' class=' tab-item ' table/A/Nav Div class=' content-group ' Div class=' content-item active ' id=' item 01 ' Lenovo/Div class=' content 'tab-group’)。addeventlistener ('click '，function(event){ var target=event . target；//单击选项if (target。标记名===' a' ~目标。类名。indexof(' tab-item '){ event。prevent default()；if(~ target . classname . indexof(' active ')){ return；} var href=target . GetAttribute(' href ')；//获取click //TODO切换选项var active tab=document . queryselector('的目标标志。tab-group . active’)；activetab . class name=activetab . class name . replace(' active '，' ')；target . classname=target . classname ' ' ' active '；//与//TODO选项var对应的内容切换活动内容=document.queryselector('。content-group . active’)；active content . class list . remove(' active ')；var content elem=document . getelementbyid(href)；content elem . class list . add(' active ')；} }，false)；/脚本以上就是本文的全部内容。希望本文的内容能给大家的学习或工作带来一些帮助，也希望多多支持我们！