Tab选项卡

1.先把HTML和CSS打上去.

2.把HTML的头部打上去,我这边弄了五个内容.

3.再把内容慢慢打上去,推荐用<ul><li>标签,如图,然后把五个内容打上”类”:class,后面再加上样式display,后面的block是显示,none是隐藏,所以只有一个block.

4.这时候的效果就是这样子的.

5.css就是来写HTML的样式改变它的外貌,我们先把HTML的头部样式写完,如图.

6.再把内容部分写上.

7.现在这是敲完css后的样子.

8.最后我们来敲写js(JavaScript缩写)

头部:

先用var getElementById获取到id,然后再用getElementsByTagName获取到li标签.

内容:

用getElementsByClassName获取到class为body的内容

9.后面移入显示的js写上即可,如图.

10.最后ctrl+s把全部都保存了,切换到浏览器观看效果,如图.