js 스위칭 div css_기본 지식에 대한 자세한 내용

첨부코드 :

코드복사 코드는 다음과 같습니다

/*具体模块放在这个大div里*/
#contentmenu1{
width:100%;
clear:both;
height:800px;
}
/*具体模块div
由上下两块div构成
上面的div又左面 右边 三块拼成圆角图片
下面div主要放置内容
*/
/*具体模块div*/
.content{
width:30%;
height:190px;
float:left;
margin-left:2%;
margin-top:10px;
}
/*具体模块div上部分*/
.content-top{
width:100.5%;
height:24px;
float:left;
}
/*具体模块div上部分左*/
.content-top-left{
width:1%;
height:24px;
float:left;
background-image: url(images/module_head_bg_left.png);
background-position:left;
}
/*具体模块div上部分右*/
.content-top-right{
width:99%;
height:24px;
background-image: url(images/module_head_bg_right.png);
float:left;
background-position:right;
}
/*具体模块div下部分*/
.content-bottom{
width:100%;
height:150px;
float:left;
border:solid 1px #83ACCF;
}
/*第二块div*/
#contentmenu2{
width:100%;
border:solid 1px;
height:800px;
float:left;
}
/*第三块div*/
#contentmenu3{
width:100%;
border:solid 1px;
height:800px;
float:left;
display:none;
}
/*第四块div*/
#contentmenu4{
width:100%;
border:solid 1px;
height:800px;
float:left;
display:none;
}

• 计划的执行


• 战略资源


• 项目地图


• 项目分析

第三块

제사块

问题：点击了

战略资源

'contentmenu2' 这个div还是不显示候?
사용하는 jQuery可以直接解决这个问题，如下的代码：
HTML 코드:

复主代码 代码如下:

>




> ;

• 실행


• 전략적 자원


• 프로젝트 맵
🎜>
• 프로젝트 분석

;

;

🎜>

> ;

;/div>

>

;div class="content-top-left">

;/div>

-컨텐츠 div의 세 번째 부분- ->

세 번째 블록

-콘텐츠 div의 네 번째 블록-- >

네 번째 블록

;