Examples of CSS Tag switching code are more beautiful. Our design is more and more pursuing a simple style, and we hope to display more content in a limited space. At the same time, we found some problems. The simple arrangement of content always makes the page very long. Many scrolling screens can complete the layout of the displayed content. YAHOO and Netease took the lead in applying the Label Switching layout method, breaking the limitations of the conventional layout. More content can be placed in the same size area. You only need to click different tabs or links to expand the content. This does not need to open a new webpage, but is done on the same page.
I. Overall Implementation of tag switching:
There are multiple ways to implement this label switching layout, and different codes are circulating. We apply div css for layout. First, let's sort out the ideas and how to achieve this label switching effect:
1. First, you need to place the container for Label Switching. It can be in the form of a tab or a link;
2. place specific content and display one of them as the display status by default. Other content is hidden;
3. When a user clicks a tab or link, the javascript Application switches to the specified layer for display, while other content layers are hidden;
4. conduct in-depth research at a later stage, for example, removing the dotted lines of links and beautifying texts on the Content layer.
Let's look at the final slice of this instance:
2. Based on the above ideas, we began to organize HTML code. We made the following plan:
1. We deploy a general container and apply the woaicss class.
2. Set an unordered list UL as a tab or link container (details below ).
3. We have set four layers as the content layer (we assume there are four switches ). Pay special attention to the class applied to all four layers.
Woaicss_con. At the same time, different IDs are specified for them. This is to allow javascript to be controlled. We set
The style of a layer is a block element, that is, the content layer is displayed. The other three layers are hidden.
3. Let's further improve the HTML code. Unordered list UL adds some links:
- 52CSS.com
- Div CSS tutorial
- CSS layout example
- WEB Standardization
1. We applied two classes woaicss_title and woaicss_title_bg1 to the unordered list UL. The first class can,
Link to control the overall appearance. To achieve the overall beautification effect. We also specify a woaicsstitle id for the unordered list UL.
You can apply javascript to style control.
2. We added four links and set the Link Target to javascript: void (0 ). We should understand that when the link is "#
", The browser will return to the top of the page. Here we do not want to see such a result, because in many cases, our switching box
Not necessarily on the first screen of the webpage. If you click the link back to the top, the visitor will not immediately see the changes in the content layer. Lost
The meaning of the label switching effect.
3. We set the onclick action avascript: woaicssq (x) for the link ). Here we pass parameters to javascript
Execute different scripts to achieve the switchover effect.
4. Start writing javascript scripts:
Function woaicssq (num ){
For (var id = 1; id <= 4; 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 ";
}
The working principle of javascript scripts is briefly described as follows:
(Because 52CSS.com only discusses CSS, this script is not analyzed in detail here)
1. Set the woaicssq function and obtain parameters from the link for tag switching, for example, javascript: woaicssq (2)
2. Declare the variable id as 1 and smaller than or equal to 4. This is the value of the four content layers.
3. Declare the variable MrJin as "woaicss_con" + id. (note the id of the content layer we set in step 1, for example:
Id = "woaicss_con2 ".) When id is the specified value, the attribute of this layer is display = "block ";. Otherwise, the attribute of the layer is
Display = "none ". This allows you to switch between display and hide at the content layer.
4. When the variable id is 1-4, a value is used to define the style of the container whose id is woaicsstitle, for example:
Woaicss_title woaicss_title_bg3. In this way, we can set different styles for switching links through different class classes.
When a layer is displayed, we can give some instructions on the Link corresponding to the layer. Such as the highlight status of the tab.
5. start compiling CSS:
*{
List-style-type: none;
Font-size: 12px;
Text-decoration: none;
Margin: 0;
Padding: 0;
}
The overall layout declaration removes the pre-set mark of the list item and sets the text size to 12px to remove the text trim line. Both the outer and inner margins are
Zero.
. Woaicss {
Width: 438px;
Height: 300px;
Overflow: hidden;
Margin: 50px auto;
}
The style definition of the overall label switching window. The width and height are set. Overflow is hidden, the top and bottom margins are 50px, and the left and right sides are automatic to achieve horizontal scaling.
Center alignment.
. Woaicss_title {
Width: 438px;
Height: 30px;
Background: # fff url(btn_bg.png) no-repeat; overflow: hidden;
}
The following is an example of a sequence table. The background image is btn_bg.png.
. Woaicss_title li {
Display: block;
Float: left;
Margin: 0 2px 0 0;
Display: inline;
Text-align: center;
}
The style of the list item in the unordered list. It is set as a block element and the application floats to the left. The margin on the right is 2px. Inline list items, text
The word alignment is centered.
. Woaicss_title li {
Display: block;
Width: 90px;
Heigth: 30px;
Line-height: 34px;
Color: # fff;
}
The style of the List necklace. It is set as a block element and the width and height are specified. The Row Height Is 34px, and the color is white color: # fff;
. Woaicss_title li a: hover {
Color: # f0f0f0;
Text-decoration: underline;
}
The hover style of the List necklace. The color is # f0f0f0, And the underline is used as the decorative line.
. 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 ;}
For the definition of the four styles, contact Step 4 javascript script. That is, when the function value changes, the corresponding unordered list
The style is redefined, and the background image positioning is adjusted here to realize the highlight of the option card.
. Woaicss_con {
Display: block;
Width: 438px;
Height: 270px;
Background: url(con_bg.png) no-repeat 0 0; overflow: hidden;
}
The style of the content layer defines the width and height, and sets the background image con_bg.png. 52CSS.com please note that the background here
Images and background images of the unordered list UL should be seamlessly integrated. That is, the two are a whole in appearance.
6. content enrichment:
We fill in a certain amount of content for the content layer and beautify it. For example: (only one of them indicates that the other three are identical .)
- Web Developer plug-in tutorial CSS Web page layout auxiliary design weapon! Graphic description
!
- The CSS Templates channel Added 22 Templates updated on April 9, April 5.
- Introduction to XHTML and CSS: A series of tutorials starting from scratch!
- Getting started with DIV + CSS layout (directory)
- 17 basic CSS tutorials [Htmldog translation]
- Div css layout example: 10-step recording with css website layout! (Directory)
- Step-by-Step 12-day basic learning of the WEB2.0 standard tutorial!
- Div + CSS webpage layout tutorial!
Our enriched content layer is a UL unordered list, And we define its style:
. 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 {
Color: # 03c;
}
. Woaicss_con li a: hover {
Color: #069;
Text-decoration: underline;
}
This is not the focus of this article, so I will not repeat it here. For more information, see >>> 52CSS.com's article on list UL production <
7. Details
The link here does not play the role of real URL redirection. It is only a tag, so we can remove its dotted box
Make our pages more neat and natural. Save the following code as the xuxian. htc file:
