我们的设计越来越追求一种简洁的风格，希望在有限的空间内展示更多的内容。与此同时我们发现一些问题，内容的简单排列总使页面很长。滚屏很多才能将显示的内容布局完毕。YAHOO与网易率先应用了标签切换的布局方式，打破了常规布局的局限性，在相同尺寸的区域内，可以放置更多的内容。我们只需要点击不同的选项卡或链接就能展开内容，这并不需要打开新的网页，只是在同一页内完成。
一、标签切换总体的实现思路：
实现这种标签切换的布局有多种方式，也流传着各种不同的代码，我们应用DIV CSS进行布局，首先来整理一下思路，如何实现这样的标签切换效果：
1、首先要放置标签切换的容器，可以是选项卡形式，也可以是链接的形式；
2、放置具体的内容，并默认显示其中的一个为显示状态。其它的内容则进行隐藏；
3、当用户点击选项卡或链接时，应用javascript切换到指定的层进行显示，而其它的内容层进行隐藏；
4、进行后期深入，例如，去除链接虚线与内容层图文的美化等。
我们看最终本实例的效果图片：
二、根据上面的思路我们开始整理HTML代码。我们作了如下规划：
当前位置: 编程技术>WEB前端
CSS标签切换代码实例教程 比较漂亮
来源: 互联网 发布时间：2014-09-06
本文导语: 我们的设计越来越追求一种简洁的风格，希望在有限的空间内展示更多的内容。与此同时我们发现一些问题，内容的简单排列总使页面很长。滚屏很多才能将显示的内容布局完毕。YAHOO与网易率先应用了标签切换的布局方式，...
1、我们布置一个总体的容器，并应用类woaicss。
2、设置一个无序列表UL作为选项卡或链接的容器（下面详细介绍）。
3、我们分别设置了四个层，作为内容层（我们假想有四个切换）。请特别注意这四个层均应用了类
woaicss_con。与此同时为他们分别指定了不同的id。这是为了让javascript可以进行控制。我们设置第
一个层的样式为块元素，即显示出该内容层。而其它三层均进行了隐藏。
三、我们开始进一步完善HTML代码。无序列表UL增加一些链接：
1、我们为无序列表UL应用了两个类woaicss_title、woaicss_title_bg1，第一个类可以对UL及LI、
链接进行整体的外观控制。以实现整体美化效果。我们也为无序列表UL指定了一个id为woaicsstitle，目
的在于可以应用javascript进行样式控制。
2、我们增加了四个链接，并对链接目标指定为：javascript:void(0)。我们应该了解，当链接为“#
”时，浏览器会回到页面顶部。而此处我们并不希望看到这样的结果，因为在很多情况下，我们的切换框
并不一定是在网页的第一屏，如果点击链接回到顶部，访客就不会立即看到内容层所出现的变化。失去了
制作标签切换效果的意义。
3、我们为链接设置了onclick动作avascript:woaicssq(x)。我们在这里向javascript传递参数，以
执行不同的脚本，实现切换的效果。
四、开始进行javascript脚本的编写：
function woaicssq(num){
for(var id = 1;id>> 52CSS.com关于列表UL制作的文章 > 点击这里查看