Home >Web Front-end >CSS Tutorial >CSS tag switching code example tutorial is relatively beautiful_Experience exchange
CSS tag switching code example tutorial is relatively beautiful_Experience exchange
- WBOYOriginal
- 2016-05-16 12:07:081310browse
Our designs are increasingly pursuing a concise style, hoping to display more content in a limited space. At the same time, we found some problems. The simple arrangement of content always made the page very long. It takes a lot of scrolling to lay out the displayed content. YAHOO and NetEase took the lead in applying the tab switching layout method, breaking the limitations of conventional layout and allowing more content to be placed in the same size area. We just need to click on different tabs or links to expand the content. This does not require opening a new web page, it is just done within the same page.
1. The overall implementation idea of label switching:
There are many ways to implement the layout of this label switching, and there are also various codes circulating. We use DIV CSS for layout. First of all Let’s sort out the ideas and how to achieve such a label switching effect:
1. First, place a container for label switching, which can be in the form of a tab or a link;
2. Place specific content, and By default, one of them is displayed. Other content is hidden;
3. When the user clicks a tab or link, use javascript to switch to the specified layer for display, while other content layers are hidden;
4. Carry out later in-depth analysis, for example, Remove link dotted lines and beautify content layer graphics and text, etc.
Let’s look at the final effect picture of this example: 
二、根据上面的思路我们开始整理HTML代码。我们作了如下规划：
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 {
var MrJin="woaicss_con"+id;
if(id==num)
document.getElementById(MrJin).style.display="block";
else
document.getElementById(MrJin).style.display="none";
}
if(num==1)
document.getElementById("woaicsstitle").className="woaicss_title woaicss_title_bg1";
if(num==2)
document.getElementById("woaicsstitle").className="woaicss_title woaicss_title_bg2";
if(num==3)
document.getElementById("woaicsstitle").className="woaicss_title woaicss_title_bg3";
if(num==4)
document.getElementById("woaicsstitle").className="woaicss_title woaicss_title_bg4";
}
javascript脚本工作原理作简要的说明：
（由于本站52CSS.com仅针对CSS进行讨论，这里对此脚本不作详细分析）
1、设置函数woaicssq，并从标签切换的链接中获取参数，如：javascript:woaicssq(2)
2、声明变量id为数值为1并小于等于4。这是我们四个内容层的数值。
3、声明变量MrJin为"woaicss_con"+id; （请注意我们在第一步骤所设置内容层的id，如：
id="woaicss_con2"。）当id为所指定的数值时，则该层的属性为display="block";。否则层的属性为
display="none"。即实现了内容层显示与隐藏的切换功能。
4、当变量id为1-4其中的某一个数值是，对id为woaicsstitle的容器进行样式定义，如：
woaicss_title woaicss_title_bg3。这样我们就可以通过不同的class类，对切换链接进行不同的样式定
义，当某一层显示的时候，我们可以对该层所对应的链接作出一些指示。如选项卡的突出状态等。
五、开始CSS的编写：
* {
list-style-type:none;
font-size:12px;
text-decoration:none;
margin:0;
padding:0;
}
总体布局声明，去除列表项预设标记，设置文字大小为12px，去除文字装饰线，外边距与内边距均为
零。
.woaicss {
width:438px;
height:300px;
overflow:hidden;
margin:50px auto;
}
总体标签切换窗口的样式定义，宽高设置，溢出为隐藏，上下外边距为50px，左右为自动，实现水平
居中对齐。
.woaicss_title {
width:438px;
height:30px;
background:#fff url(btn_bg.png) no-repeat; overflow:hidden;
}
无序列表UL的样式，宽高设置，背景图片为btn_bg.png。
.woaicss_title li {
display:block;
float:left;
margin:0 2px 0 0;
display:inline;
text-align:center;
}
无序列表内列表项的样式，设置为块元素并应用向左的浮动，右侧外边距为2px。将列表项内联，文
字对齐方式为居中。
.woaicss_title li a {
display:block;
width:90px;
heigth:30px;
line-height:34px;
color:#fff;
}
列表项链接的样式，设置为块元素并指定了宽高，行高为34px，颜色为白色color:#fff；
.woaicss_title li a:hover {
color:#f0f0f0;
text-decoration:underline;
}
列表项链接的悬停样式，颜色为#f0f0f0，加下划线作为装饰线。
.woaicss_title_bg1 {background-position:0 0;}
.woaicss_title_bg2 {background-position:0 -30px;}
.woaicss_title_bg3 {background-position:0 -60px;}
.woaicss_title_bg4 {background-position:0 -90px;}
此四个样式的定义请与步骤四javascript脚本进行联系。即在函数的值变化时，相应的对无序列表的
样式进行重新定义，我们在此处对背景图定位进行了调整，实现了选项卡片的突出状态。
.woaicss_con {
display:block;
width:438px;
height:270px;
background:url(con_bg.png) no-repeat 0 0; overflow:hidden;
}
内容层的样式定义，指定宽高，并设置背景图片con_bg.png。52CSS.com请您特别注意，这里的背景
图片与无序列表UL的背景图片应该是无缝结合。即从外观上它们两者是一个整体。
六、内容充实：
我们为内容层填充一定的内容，并对其进行美化，例如：（仅说明其一，其它三个雷同。）
- Web Developer插件教程 CSS网页布局辅助设计利器！详细图文讲解
！ - CSS Templates 频道4月5日更新 增加模板22套
- XHTML与CSS入门经典 从零开始系列教程！
- DIV+CSS布局入门示例（目录）
- CSS基础教程17篇 [翻译Htmldog]
- DIV CSS布局实例：用css网站布局之十步实录！（目录）
- WEB2.0标准教程 循序渐进十二天的基础学习！
- Div+CSS 网页布局 教程！
我们充实的内容层为一个UL无序列表，我们对其进行样式定义：
.woaicss_con ul {
width:418px;
height:250px;
margin:12px auto;
}
.woaicss_con li {
width:418px;
line-height:30px;
margin:0 auto;
white-space:nowrap;
text-overflow:ellipsis;
overflow: hidden;
}
.woaicss_con li a {
color:#03c;
}
.woaicss_con li a:hover {
color:#069;
text-decoration:underline;
}
此处不是本文重点，所以不再赘述，相关的知识请参考：>>> 52CSS.com关于列表UL制作的文章
七：细节修饰
我们这里的链接并未起到真正的URL转向的作用，仅是一个标签，所以我们可以将其虚线框去除，以
让我们的页面更加的工整与自然。将下面的代码另存为xuxian.htc文件：
<script> <BR>function hscfsy(){ <BR>this.blur(); <BR>} <BR></script>
We add this code in the CSS style: a {behavior:url(xuxian.htc)}
This removes the link dashed frame (please note that this effect has no effect in FF).
Eight: Final effect and inferences:
We can finally achieve this effect, you can >>> click here to view
In our implementation You may encounter another situation at work:
We need to switch when the mouse moves across it, and open the link to the corresponding content when the mouse clicks.
We can achieve this by modifying the unordered list UL as follows:
We achieved this effect through slight adjustments.