一个简单的切换div的js

其实本人是对js一窍不通的
就是那种给个jq我都不懂引用的水平
我也不知道我对js一直都没啥性趣,忧伤

今天这个算是我第一个研究的js的吧
只是一个简单的点击按钮切换js的代码
记录一下吧
demo地址来一个:http://ctnmb.com/demo/div.html

js代码部分:

1
2
3
4
5
6
7
8
9
10
<script language="JavaScript"> 
function preview(DivId) 
{ 
  if(document.getElementById(DivId).style.display=='none') 
   { document.getElementById(DivId).style.display='';  }
   else 
   { document.getElementById(DivId).style.display='none'; }
 
} 
</script>

html部分:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//div1
<div id="1" style="display:''">
//display:''是默认显示的div
//这里是的div1里面的内容
<input type='button' onClick="preview('1')&preview('2')" value='切换到2' />
</div> 
//div2
<div id="2" style="display:none">
//display:none 是默认隐藏的div
//这里是的div里面的内容
<input type='button' onClick="preview('1')&preview('2')" value='切换到1' />
</div> 
 
//onClick="preview('1')&preview('2')",在preview填的是div的id

以下是完整的代码:
复制走即可使用~~~~

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!doctype html>
<html>
<head>
<meta charset="utf-8">
 
<title>div切换test</title>
<script language="JavaScript"> 
function preview(DivId) 
{ 
  if(document.getElementById(DivId).style.display=='none') 
   { document.getElementById(DivId).style.display='';  }
   else 
   { document.getElementById(DivId).style.display='none'; }
 
} 
</script>
</head>
 
<body>
 
 
<div id="1" style="display: ''; background: #F50307; width: 300px; float: left; text-align: center;">
这个是div1<br>
 
<input type='button' onClick="preview('1')&preview('2')" value='切换到2' />
</div> 
 
<div id="2" style="display:none;background-color:#0823F3;width: 300px; float: left; text-align: center;">
这个是div2<br>
 
<input type='button' onClick="preview('1')&preview('2')" value='切换到1' />
</div> 
 
</body>
</html>

添加评论

  1. .回复 2015-05-03 01:00

    这什么鬼