css的使用在开发中是很常见的，选项卡的切换也是如此。关于如何简单利用css制作选项卡切换，小编在这里给大家具体讲解一下。
工具/原料
一台可以上网的电脑
浏览器
html页面处理工具（小编在这里使用的是Notepad++）
一个html文件
方法/步骤
1、首先，打开Notepad++工具，新建一个html文件。上面写上html文件的标准框架即可。此处不做图片注释说明。
2、接着，因为要创建选项卡切换，所以，你可以在h隋茚粟胫tml文件中写上两个选项卡，在这里，我写了两个div选项卡，你可以根据自己的需求来写（三个，或荨层吒椋者更多）。这是附录的代码图片注意：div的id要写上，因为后面是根据id来处理选项卡的切换的。
3、保存后，双击html页面，你可以看到如下的效果。一个红色的框框中包含了两个选项卡，没有选中状态，也没有未选中状态。
4、写完上面的内容后，我尺攵跋赈们需要设置一下选项卡被选中后要显示的效果。在这里，我简单处理了，选中后的效果为：背景色为黄色，字体加粗，加上黑色边框。下面附录的图片是css样式的写法。
5、有了css样式，我们是不是需要给选项卡所在的div增邹菁惨挣加一个点击事件，这样才可以知道到底是哪个选项卡被点击了。这里，我给刚刚的id名称为tab1和tab2的div中寿喋馒揎增加了一个点击事件，点击后会调用函数changeTab(type)。代码详见下面给出的图片。
6、接下来，我们需要给函数来添加内容了，为了简单殂翼瑟擀实现选项卡的切换，我在这里的处理是给选中的div增加选中的css样式属性，未选中的则移除选中的css样式属性。具体沪枭诽纾代码请参考下面给出的图片内容。（如果你选项卡多于2个，也可以参考这个写法进行处理）
7、接着，我们需要给一个默认选项卡的选中事件。所以，小编在body标签中添加了一个函数调用，默认是第一个选项卡被选中。代码参考图片内容。
8、点击保存，双击运行html页面，你可以在浏览器中看到如下效果。图片内容分别为选中后的效果。
9、最后，给大家附上全部的代码内容，供给大家参考。css样式处理不算很美观，大家可以自行更改，选项卡数量也可以根据自己的需求进行增加。
