CSS+JS制做Tab选项卡

发表于 2009年3月28日由 kily

网页选项卡的浏览方式因为它的简单易用现在已经是很常见了。当然你可以用纯CSS去制做，但是那样的话会比较麻烦，因为在IE6中只有A标签才可以响应鼠标的hover事件。为此我们将不得不添加更多的标签来控制它，而且你还得去调试并使它兼容每个浏览器。如果换成用JavaScript来实现的话就显得轻而易举了，在收集了网上的各种资料后总结了一种简单的，用于制做Tab的核心代码。效果如下图《预览DEMO》：

基本思路：

1.先用CSS写好基本样式。

2.每个选项卡的title响应changeTab()事件，并传送函数参数

3.再用JavaScript语句做三次循环（具体由你选项卡的个数决定），分别把‘项卡的title’和‘内容p’放入循环内进行判断

《CSS+JS制做Tab选项卡》上有 8 条评论

Suitear 在 2010年9月25日13:01 说：

我对JS只是略懂!回复太慢希望有空在QQ296907291上直接交流！如果愿意的话可以直接帮我做一个精简的tab！但是可以添加图片文字链接等!

回复 ↓
Suitear 在 2010年9月24日23:32 说：

终于找到毛病了！由于是p id 所以不能在内容框内加入图片链接
或列表等！

回复 ↓
- kily 在 2010年9月25日09:08 说：
  
  @Suitear 根据自己的情况改下代码就行了！
  
  回复 ↓
Suitear 在 2010年9月24日23:17 说：

使用了，不错太精简了!

回复 ↓
Suitear 在 2010年9月24日23:10 说：

应该不用了！竟然全写Html了，没调用！

回复 ↓
Suitear 在 2010年9月24日23:09 说：

跟着前面意思是我需要一些源文件！

回复 ↓
Suitear 在 2010年9月24日23:07 说：

不知道博主关注没有！

回复 ↓
China CSS 在 2009年10月12日10:37 说：

这个好东东，我要先收藏了，谢谢了

回复 ↓

发表评论取消回复