Wednesday, January 6, 2016, weather showers
About the TAB switch exercise
1. HTML part
<body>
<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 >
</ul>
<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>
</div>
</div>
</body>
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++) {
J.style.display = "None";
}
document.getElementById (showcontent). style.display = "block";
}
</script>
3.CSS section, playable important parts, other styles according to their own preferences or design documents required to write.
. tagcontent {
Display:none;
}
#tagContent Div.selecttag {
Display:block
}
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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
