Tab选项卡

注意看代码顺序，按图片操作下去

1、首先第一步是设置一个div，这个div里放着选项卡的内容，再给这个div设置一个类为tabbox，这个类设置的是tab的宽度、高度、边框、外边距，这些可以根据你自己想要样式自己去设置出来。

 

2、第二步就是在div里设置内容，在第一个div中设置一个ul标签，ul标签的意思是无序列表，给ul标签设置一个class再设置一个id，到后面需要id来设置js的样式，打完ul标签后打li标签，li标签是用来定义列表中的项目，这里代表开头，在li标签里放上你要选项卡的开头，比如说实例中的公告、规则、论坛、安全、公益，在给第一个li标签打上一个class，这个class的用处是你没有去点击或者是鼠标移入或移出，它也会显示你给li设置class的部分，例如实例中的首页部分。

 

3、接下来设置类on的样式。

 

4、设置完on后，就可以开始用新的div去设置内容，用li标签去打上内容。

 

5、打到这里你会发现有很多不对，这个时候就要开始在css中打上你的样式，记得在前面打上通配符，里面的内容是所需的内外边距。

 

 

6、打完li样式后，就可以设置下一步js，先新建一个JavaScript，然后在body里引入这个JavaScript。

 

7、Tab的js的样式要分三部分，第一部分是获取tab的按钮和内容，再判断按钮个数也内容是否一致。

 

8、第二部分是遍历所有的按钮并且绑定鼠标移入事件。

 

9、第三步是为当前触发事件的元素设置类“on”。

 

10、最后效果。

 

这是我所学到的tab选项卡样式，分享给你们，希望可以帮助到你们。

以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！