Code attached:
Copy codeThe Code is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">
<Html>
<Head>
<Title> </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
/* Put the specific module in this big div */
# Contentmenu1 {
Width: 100%;
Clear: both;
Height: 800px;
}
/* Specific module div
Consists of up and down two div
The above div has three rounded corners on the right of the left side.
The following div mainly places content
*/
/* Specific module div */
. Content {
Width: 30%;
Height: pixel PX;
Float: left;
Margin-left: 2%;
Margin-top: 10px;
}
/* On the div of a specific module */
. Content-top {
Width: 100.5%;
Height: 24px;
Float: left;
}
/* Left of the upper part of the div of a specific module */
. Content-top-left {
Width: 1%;
Height: 24px;
Float: left;
Background-image: url (images/module_head_bg_left.png );
Background-position: left;
}
/* Right part of the div of a specific module */
. Content-top-right {
Width: 99%;
Height: 24px;
Background-image: url (images/module_head_bg_right.png );
Float: left;
Background-position: right;
}
/* Lower part of the module div */
. Content-bottom {
Width: 100%;
Height: 150px;
Float: left;
Border: solid 1px #83 ACCF;
}
/* Second div */
# Contentmenu2 {
Width: 100%;
Border: solid 1px;
Height: 800px;
Float: left;
}
/* Third div */
# Contentmenu3 {
Width: 100%;
Border: solid 1px;
Height: 800px;
Float: left;
Display: none;
}
/* The fourth 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 ('aaaaa ');
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>
</Head>
<Body>
<Div id = "wrapper">
<Div id = "header">
<Ul id = "nav">
<Li onclick = "changeBody (1)"> plan execution </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 of the first part -->
<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>
<! -- Second content 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>
<! -- Third content div -->
<Div id = "contentmenu3">
Part 3
</Div>
<! -- Div of the fourth part -->
<Div id = "contentmenu4">
Fourth
</Div>
</Div>
</Body>
</Html>
Question: Click <li onclick = "changeBody (2)"> strategic resource </li>
In this case, the 'contentmenu2 'div is not displayed?
JQuery can solve this problem directly, as shown in the following code:
HTML code:Copy codeThe Code is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">
<Html>
<Head>
<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">
/* Put the specific module in this big div */# contentmenu1 {width: 100%; clear: both; height: 800px ;}
/* The div of a specific module consists of the upper and lower Divs, and the three divs on the left side are combined into rounded corners. The div below the image is mainly placed in the content * // * specific module div */. content {width: 30%; height: pixel PX; float: left; margin-left: 2%; margin-top: 10px ;}
/* Specific module div part */. content-top {width: 100.5%; height: 24px; float: left ;}
/* Left of the upper part of the div of a specific module */. content-top-left {width: 1%; height: 24px; float: left; background-image: url (images/module_head_bg_left.png); background-position: left ;}
/* Right part of the div of a specific module */. content-top-right {width: 99%; height: 24px; background-image: url (images/module_head_bg_right.png); float: left; background-position: right ;}
/* The lower part of the module div */. content-bottom {width: 100%; height: 150px; float: left; border: solid 1px #83 ACCF ;}
/* Second div */# contentmenu2 {width: 100%; border: solid 1px; height: 800px; float: left; display: none ;}
/* Third div */# contentmenu3 {width: 100%; border: solid 1px; height: 800px; float: left; display: none ;}
/* The fourth 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>
</Head>
<Body>
<Div id = "wrapper">
<Div id = "header">
<Ul id = "nav">
<Li onclick = "changeBody (1)"> plan execution </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 of the first part -->
<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>
<! -- Second content 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>
<! -- Third content div -->
<Div id = "contentmenu3" class = "ContentMenu">
Part 3
</Div>
<! -- Div of the fourth part -->
<Div id = "contentmenu4" class = "ContentMenu">
Fourth
</Div>
</Div>
</Body>
</Html>
