html div切换,js切换div css注意的细节

Bertha 。 2022-10-06 09:56 174阅读 0赞

附上代码：

/\*具体模块放在这个大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;

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;

*  计划的执行
 *  战略资源
 *  项目地图
 *  项目分析

第三块

第四块

问题：点击了

战略资源

这个的时候 ‘contentmenu2′这个div还是不显示出来？

用jQuery可以直接解决这个问题，如下的代码：

HTML code:

/\*具体模块放在这个大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; display: none; \}

/\*第三块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; \}

function changeBody(index) \{

$(".ContentMenu").hide();

$("\#contentmenu" + index).show(500);

*  计划的执行
 *  战略资源
 *  项目地图
 *  项目分析

第三块

第四块