JS Toggle Div CSS Attention to the details

JS Toggle Div CSS Attention to the details _ basic knowledge

Last Update:2017-01-19 Source: Internet

Author: User

Tags wrapper

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Attached code:

Copy Code code as follows:

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >
<title></title>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
/* Specific module placed in this large div * *
#contentmenu1 {
width:100%;
Clear:both;
height:800px;
}
/* Specific Module Div
Consists of two pieces of div
Above Div and left right three pieces into rounded picture
Below Div main placement content
*/
/* Specific Module div*/
. content{
width:30%;
height:190px;
Float:left;
margin-left:2%;
margin-top:10px;
}
/* Specific Module DIV on part * *
. content-top{
width:100.5%;
height:24px;
Float:left;
}
/* Specific module DIV on part left/*
. content-top-left{
width:1%;
height:24px;
Float:left;
Background-image:url (images/module_head_bg_left.png);
Background-position:left;
}
/* Specific Module div section right * *
. content-top-right{
width:99%;
height:24px;
Background-image:url (images/module_head_bg_right.png);
Float:left;
Background-position:right;
}
/* Specific Module div under section * *
. content-bottom{
width:100%;
height:150px;
Float:left;
Border:solid 1px #83ACCF;
}
/* Second block div*/
#contentmenu2 {
width:100%;
Border:solid 1px;
height:800px;
Float:left;
}
/* Third block div*/
#contentmenu3 {
width:100%;
Border:solid 1px;
height:800px;
Float:left;
Display:none;
}
/* Fourth Block div*/
#contentmenu4 {
width:100%;
Border:solid 1px;
height:800px;
Float:left;
Display:none;
}
</style>
<script type= "Text/javascript" >
function Changebody (index) {
Switch (index) {
Case 1:{
document.getElementById (' contentmenu1 '). Style.display = "";
document.getElementById (' contentmenu2 '). Style.display = "None";
document.getElementById (' Contentmenu3 '). Style.display = "None";
document.getElementById (' Contentmenu4 '). Style.display = "None";
Break
}
Case 2:{
Alert (' aaaaaa ');
document.getElementById (' contentmenu2 '). Style.display = "block";
document.getElementById (' contentmenu1 '). Style.display = "None";
document.getElementById (' Contentmenu3 '). Style.display = "None";
document.getElementById (' Contentmenu4 '). Style.display = "None";
Break
}
Case 3:{
document.getElementById (' contentmenu1 '). Style.display = "None";
document.getElementById (' contentmenu2 '). Style.display = "None";
document.getElementById (' Contentmenu3 '). Style.display = "";
document.getElementById (' Contentmenu4 '). Style.display = "None";
Break
}
Case 4:{
document.getElementById (' contentmenu1 '). Style.display = "None";
document.getElementById (' contentmenu2 '). Style.display = "None";
document.getElementById (' Contentmenu3 '). Style.display = "None";
document.getElementById (' Contentmenu4 '). Style.display = "";
Break
}
}
}
</script>
<body>
<div id= "wrapper" >
<div id= "Header" >
<ul id= "NAV" >
<li onclick= "Changebody (1)" > Program Implementation </li>
<li onclick= "Changebody (2)" > Strategic Resources </li>
<li onclick= "Changebody (3)" > Project Map </li>
<li onclick= "Changebody (4)" > Project Analysis </li>
</ul>
</div>

<div id= "Contentmenu1" >
<div class= "Content" >
<div class= "Content-top" >
<div class= "Content-top-left" ></div>
<div class= "Content-top-right" ></div>
</div>
<div class= "Content-bottom" ></div>
</div>
<div class= "Content" >
<div class= "Content-top" >
<div class= "Content-top-left" ></div>
<div class= "Content-top-right" ></div>
</div>
<div class= "Content-bottom" ></div>
</div>
<div class= "Content" >
<div class= "Content-top" >
<div class= "Content-top-left" ></div>
<div class= "Content-top-right" ></div>
</div>
<div class= "Content-bottom" ></div>
</div>
<div class= "Content" >
<div class= "Content-top" >
<div class= "Content-top-left" ></div>
<div class= "Content-top-right" ></div>
</div>
<div class= "Content-bottom" ></div>
</div>
<div class= "Content" >
<div class= "Content-top" >
<div class= "Content-top-left" ></div>
<div class= "Content-top-right" ></div>
</div>
<div class= "Content-bottom" ></div>
</div>
<div class= "Content" >
<div class= "Content-top" >
<div class= "Content-top-left" ></div>
<div class= "Content-top-right" ></div>
</div>
<div class= "Content-bottom" ></div>
</div>
<div class= "Content" >
<div class= "Content-top" >
<div class= "Content-top-left" ></div>
<div class= "Content-top-right" ></div>
</div>
<div class= "Content-bottom" ></div>
</div>
<div class= "Content" >
<div class= "Content-top" >
<div class= "Content-top-left" ></div>
<div class= "Content-top-right" ></div>
</div>
<div class= "Content-bottom" ></div>
</div>
<div class= "Content" >
<div class= "Content-top" >
<div class= "Content-top-left" ></div>
<div class= "Content-top-right" ></div>
</div>
<div class= "Content-bottom" ></div>
</div>
<div class= "Content" >
<div class= "Content-top" >
<div class= "Content-top-left" ></div>
<div class= "Content-top-right" ></div>
</div>
<div class= "Content-bottom" ></div>
</div>
<div class= "Content" >
<div class= "Content-top" >
<div class= "Content-top-left" ></div>
<div class= "Content-top-right" ></div>
</div>
<div class= "Content-bottom" ></div>
</div>
<div class= "Content" >
<div class= "Content-top" >
<div class= "Content-top-left" ></div>
<div class= "Content-top-right" ></div>
</div>
<div class= "Content-bottom" ></div>
</div>

<div id= "CONTENTMENU2" >
<div class= "Content" >
<div class= "Content-top" >
<div class= "Content-top-left" ></div>
<div class= "Content-top-right" ></div>
</div>
<div class= "Content-bottom" ></div>
</div>
<div class= "Content" >
<div class= "Content-top" >
<div class= "Content-top-left" ></div>
<div class= "Content-top-right" ></div>
</div>
<div class= "Content-bottom" ></div>
</div>
<div class= "Content" >
<div class= "Content-top" >
<div class= "Content-top-left" ></div>
<div class= "Content-top-right" ></div>
</div>
<div class= "Content-bottom" ></div>
</div>
</div>

<div id= "Contentmenu3" >
Third block
</div>

<div id= "Contentmenu4" >
Block Four
</div>
</div>
</body>

Question: Click on <li onclick= "Changebody (2)" > Strategic Resources </li>
This time ' contentmenu2′ this div still does not show out?
jquery can be used to solve this problem directly, such as the following code:
HTML Code:

Copy Code code as follows:

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >
<title></title>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<script src= ". /jquery/jquery-1.7b2.js "type=" Text/javascript "></script>
<style type= "Text/css" >
/* Specific modules placed in this large div * * * * #contentmenu1 {width:100%; clear:both; height:800px}
/* Specific Module div by the upper and lower two div composed of div and the left to the right three pieces into a fillet picture below div main place content *//* specific module div*/.content {width:30%; height:190px; float:left; gin-left:2%; margin-top:10px; }
/* Specific Module div on the part */.content-top {width:100.5%; height:24px; float:left;}
/* Specific Module Div Upper left */.content-top-left {width:1%; height:24px float:left; Background-image:url (images/module_head_bg_ Left.png); Background-position:left; }
/* Specific Module Div Upper part right */.content-top-right {width:99%; height:24px; Background-image:url (images/module_head_bg_right.png); Float:left; Background-position:right; }
/* Specific module div under section */.content-bottom {width:100%; height:150px float:left; border:solid 1px #83ACCF;}
/* Second block div*/#contentmenu2 {width:100%; border:solid 1px; height:800px; float:left; display:none;}
/* Third block div*/#contentmenu3 {width:100%; border:solid 1px; height:800px; float:left; display:none;}
/* Fourth block div*/#contentmenu4 {width:100%; border:solid 1px; height:800px; float:left; display:none;}
</style>
<script type= "Text/javascript" >
function Changebody (index) {
$(". Contentmenu "). Hide ();
$ ("#contentmenu" + Index). Show (500);
}
</script>
<body>
<div id= "wrapper" >
<div id= "Header" >
<ul id= "NAV" >
<li onclick= "Changebody (1)" > Program Implementation </li>
<li onclick= "Changebody (2)" > Strategic Resources </li>
<li onclick= "Changebody (3)" > Project Map </li>
<li onclick= "Changebody (4)" > Project Analysis </li>
</ul>
</div>

<div id= "contentmenu1" class= "Contentmenu" >
<div class= "Content" >
<div class= "Content-top" >
<div class= "Content-top-left" >
</div>
<div class= "Content-top-right" >
</div>
</div>
<div class= "Content-bottom" >
</div>
</div>
<div class= "Content" >
<div class= "Content-top" >
<div class= "Content-top-left" >
</div>
<div class= "Content-top-right" >
</div>
</div>
<div class= "Content-bottom" >
</div>
</div>
</div>

<div id= "contentmenu2" class= "Contentmenu" >
<div class= "Content" >
<div class= "Content-top" >
<div class= "Content-top-left" >
</div>
<div class= "Content-top-right" >
</div>
</div>
<div class= "Content-bottom" >
</div>
</div>
<div class= "Content" >
<div class= "Content-top" >
<div class= "Content-top-left" >
</div>
<div class= "Content-top-right" >
</div>
</div>
<div class= "Content-bottom" >
</div>
</div>
</div>

<div id= "Contentmenu3" class= "Contentmenu" >
Third block
</div>

<div id= "Contentmenu4" class= "Contentmenu" >
Block Four
</div>
</div>
</body>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More