TAB switch Exercise

Source: Internet
Author: User

Wednesday, January 6, 2016, weather showers

About the TAB switch exercise

1. HTML part


<div id=con>
<ul id=tags>
<li class= "Selecttag" ><a onmouseover= "Selecttag (' tagContent0 ', this)" href= "javascript:void (0)" > label one </a> </li>
<li><a onmouseover= "Selecttag (' tagContent1 ', this)" href= "javascript:void (0)" > label two </a> </li >
<li><a onmouseover= "Selecttag (' TagContent2 ', this)" href= "javascript:void (0)" > Adaptive width label </a> </ Li>
<li><a onmouseover= "Selecttag (' TagContent3 ', this)" href= "javascript:void (0)" > Adaptive width </a> </li >
<div id=tagcontent>
<div class= "Tagcontent selecttag" id=tagcontent0> the contents of the first label </div>
<div class= "Tagcontent" id=tagcontent1> the contents of the second label </div>
<div class= "tagcontent" id=tagcontent2> content of the third label </div>
<div class= "Tagcontent" id=tagcontent3> fourth label content </div>


The above code is divided into tag tags and content tagcontent two parts are encapsulated in con. tags in the a tag add mouse over event Selecttag (showcontent,selfobj)->js function Selecttag (showcontent,selfobj)

The most important thing is Class=selecttag, it has two meanings, one is to add this class in tags and tagcontent module respectively, bind the label and content together, it is convenient for JS to call. II (see 3.CSS Code) is in tagcontent with class= "Tagcontent"

Initialize the page content settings, when the a tag does not trigger the onmouseover event, the page can display the contents of the label one, instead of label one, label two, the label of the adaptive width, the adaptive width of the content are displayed, will not need to display the content with Display:none implicit,

The content that needs to be displayed is set to Display:block using Selecttag; Note: Be sure to indicate the Selecttag path.

2.JS part

<script type=text/javascript>
function Selecttag (showcontent,selfobj) {
Action label, using a for loop to get the label length
var tag = document.getElementById ("tags"). getElementsByTagName ("Li");
var taglength = tag.length;
for (i=0; i<taglength; i++) {

Gets the label all empty style class

Tag[i].classname = "";

The passed-in parameter adds a style class Selecttag
SelfObj.parentNode.className = "Selecttag";
Displays the contents of the clicked tag, not the Click does not display
for (i=0; J=document.getelementbyid ("tagcontent" +i); i++) { = "None";
document.getElementById (showcontent). style.display = "block";


3.CSS section, playable important parts, other styles according to their own preferences or design documents required to write.

. tagcontent {


#tagContent Div.selecttag {

When debugging in IE (version 10), it is reported that "CSS is ignored because of Mime type mismatch" and needs to check if the content type in Hkey_classes_root\.css in the registry is TEXT/CSS

TAB switch Exercise

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.