比如
<head>
<script type="text/javascript">
function change_div(id){
if (id == 'gsywly' )
{
document.getElementById("gsgs").style.display = 'none' ;
document.getElementById("gsywly").style.display = 'block' ;
document.getElementById("gsywly1").style.display = 'none' ;
}
else if(id == 'gsgs')
{
document.getElementById("gsywly").style.display = 'none' ;
document.getElementById("gsgs").style.display = 'block' ;
document.getElementById("gsywly1").style.display = 'none' ;
}
else if(id == 'gsywly1') {
document.getElementById("gsywly").style.display = 'none' ;
document.getElementById("gsgs").style.display = 'none' ;
document.getElementById("gsywly1").style.display = 'block' ;
}
}
</script><style type="text/css">
#gsywly {
display:none;
}
#gsgs {
display:none;
}
</style>
</head><body>
<div>
<div> <a href="#" onclick="change_div('gsgs')">1</a> </div>
<div> <a href="#" onclick="change_div('gsywly')">2</a> </div>
<div> <a href="#" onclick="change_div('gsywly1')">3</a> </div>
</div>
<div id="gsgs">
<h2>1</h2>
</div>
<div id="gsywly" >
<h2>2</h2>
</div>
<div id="gsywly1" >
<h2>3</h2>
</div> <div id="gsgs">
<h2>1</h2>
</div>
<div id="gsywly" >
<h2>2</h2>
</div>
<div id="gsywly1" >
<h2>3</h2></body>
那个切换只能切换第一次出现的id，
上面代码中，后面的那组只能出现3而不能像第一组一样切换
如果我想实现点一个键多div相应切换应该如何更改？谢谢！
<head>
<script type="text/javascript">
function change_div(id){
if (id == 'gsywly' )
{
document.getElementById("gsgs").style.display = 'none' ;
document.getElementById("gsywly").style.display = 'block' ;
document.getElementById("gsywly1").style.display = 'none' ;
}
else if(id == 'gsgs')
{
document.getElementById("gsywly").style.display = 'none' ;
document.getElementById("gsgs").style.display = 'block' ;
document.getElementById("gsywly1").style.display = 'none' ;
}
else if(id == 'gsywly1') {
document.getElementById("gsywly").style.display = 'none' ;
document.getElementById("gsgs").style.display = 'none' ;
document.getElementById("gsywly1").style.display = 'block' ;
}
}
</script><style type="text/css">
#gsywly {
display:none;
}
#gsgs {
display:none;
}
</style>
</head><body>
<div>
<div> <a href="#" onclick="change_div('gsgs')">1</a> </div>
<div> <a href="#" onclick="change_div('gsywly')">2</a> </div>
<div> <a href="#" onclick="change_div('gsywly1')">3</a> </div>
</div>
<div id="gsgs">
<h2>1</h2>
</div>
<div id="gsywly" >
<h2>2</h2>
</div>
<div id="gsywly1" >
<h2>3</h2>
</div> <div id="gsgs">
<h2>1</h2>
</div>
<div id="gsywly" >
<h2>2</h2>
</div>
<div id="gsywly1" >
<h2>3</h2></body>
那个切换只能切换第一次出现的id，
上面代码中，后面的那组只能出现3而不能像第一组一样切换
如果我想实现点一个键多div相应切换应该如何更改？谢谢！
解决方案 »
- 高手指导下 jquery 中 select 控件 ，根据text值来选中项没用
- window.showModalDialog打开mht文件 打开之后为空白
- extjs3.2.1郁闷的问题
- 请问高手广告条 与 导航怎么对齐,怎么修改通过js代码实现
- jsp+js代码求助
- 请教各位高手：如何用ASP结合JavaScript读取服务器端时间？
- 求网页锁定的办法
- 怎样用回车键触发事件
- 正则表达式里如何取出一个数字，具体见内！
- ***winodw.toolbar.visible=true*** 这句话为什么不对呢？马上给分
- 复选框meetingname有5个值，如何在点复选框的时候判断我选中的是哪个？
- Js操作Excel页面设置问题（在线等）
----------------------------------------------
<script type="text/javascript">
function change_div(id,id1)
{
var i;
for(i=1;i<7;i++)
{
document.getElementById(i).style.display = 'none' ;
}
document.getElementById(id).style.display = 'block' ;
document.getElementById(id1).style.display = 'block' ;
}
</script><style type="text/css">
.gsgs {
display:none;
}
</style>
</head><body>
<div>
<div> <a href="#" onclick="change_div('1','4')">1</a> </div>
<div> <a href="#" onclick="change_div('2','5')">2</a> </div>
<div> <a href="#" onclick="change_div('3','6')">3</a> </div>
</div>
<div id="1">
<h2>1</h2>
</div>
<div class="gsgs" id="2" >
<h2>2</h2>
</div>
<div class="gsgs" id="3" >
<h2>3</h2>
</div>
<!--==================后面部分====================-->
<div id="4">
<h2>1</h2>
</div>
<div class="gsgs" id="5" >
<h2>2</h2>
</div>
<div class="gsgs" id="6" >
<h2>3</h2>
</div>
</body>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
*{margin:0;padding:0;}
.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;}
*html .clearfix{height:1%;}
*+html .clearfix{height:1%;}
.clearfix{display:inline-block;}
.clearfix {display:block;}
ul{margin:10px 10px 0;}
ul li{background:#ddd; list-style:none;padding-top:5px; vertical-align:bottom}
ul li a{padding:5px 10px;margin-left:5px;text-decoration:none;font-size:12px;color:#000;float:left;}
ul li .crent{background:#fff;color:#f60;}
p{display:none;border:1px solid #ddd;border-top:none;margin:0 10px 10px;padding:5px;}
</style>
<title>Example</title>
<script type="text/javascript">
function $(objID){
return "string" == typeof(objID) ? document.getElementById(objID) : objID;
}function addEvt(tab,ct){
var ctab = $(tab).getElementsByTagName('a');
var cdiv = $(ct).getElementsByTagName('p');
for(var i = 0;i<ctab.length;i++)
{
ctab[i].onclick =function std(){
for(var i = 0;i<ctab.length;i++){
if(i!=parseInt(this.rel-1))
{
ctab[i].className="";
cdiv[i].style.display="none";
}
}
ctab[parseInt(this.rel)-1].className="crent";
cdiv[parseInt(this.rel)-1].style.display="block";
}
}
}
window.onload=function(){
addEvt('tab','ct');
addEvt('tab2','ct2');
}
</script>
</head>
<body>
<div id="all1">
<ul class="ul_bigspace" id="tab">
<li class="clearfix"><a href="#" class="crent" rel="1">平面设计</a><a href="#" rel="2">包装设计</a><a href="#" rel="3">影视广告片</a><a href="#" rel="4">媒介资源</a><a href="#" rel="5">网站设计</a><a href="#" rel="6">网站设计</a></li>
</ul>
<div id="ct">
<p style="display:block;">1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
</div>
<br>
<ul class="ul_bigspace" id="tab2">
<li class="clearfix"><a href="#" class="crent" rel="1">平面设计</a><a href="#" rel="2">包装设计</a><a href="#" rel="3">影视广告片</a><a href="#" rel="4">媒介资源</a><a href="#" rel="5">网站设计</a><a href="#" rel="6">网站设计</a></li>
</ul>
<div id="ct2">
<p style="display:block;">1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
</div>
</div>
</body>
</html>
<script type="text/javascript">
function change_div(id) {
for(var i = 1; i <= 3; i++){
document.getElementById("div"+i).style.display = 'none';
document.getElementById("div_"+i).style.display = 'none';
}
document.getElementById("div"+id).style.display = 'block';
document.getElementById("div_"+id).style.display = 'block';
}
</script> <style type="text/css">
</style>
</head><body onload="change_div('1')">
<div>
<div>
<a href="#" onclick="change_div('1')">1</a>
</div>
<div>
<a href="#" onclick="change_div('2')">2</a>
</div>
<div>
<a href="#" onclick="change_div('3')">3</a>
</div>
</div>
<div id="div1">
<h2>
1
</h2>
</div>
<div id="div2">
<h2>
2
</h2>
</div>
<div id="div3">
<h2>
3
</h2>
</div> <div id="div_1">
<h2>
1
</h2>
</div>
<div id="div_2">
<h2>
2
</h2>
</div>
<div id="div_3">
<h2>
3
</h2>
</body>