请教:点击其中aaa时,另外两个层隐藏,这个函数怎么写啊?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript">
function show(targetid){
var obj = document.getElementById(targetid);
if (obj.style.display == "block" ) {
obj.style.display = "none";
}else if (obj.style.display == "none" ) {
obj.style.display = "block";
}
}
</script>
</head><body>
<ul>
<li id="A" onclick="show('ID1')">aaa</li>
<li id="B" onclick="show('ID2')">bbb</li>
<li id="B" onclick="show('ID3')">ccc</li>
</ul><div id= "ID1" style=" display:none; width:200; height:200; background-color:#00CCFF">
aaaa
</div><div id= "ID2" style=" display:none; width:200; height:200; background-color:#ff0000">
bbbb
</div><div id= "ID3" style=" display:none; width:200; height:200; background-color:#ffff00">
cccc
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript">
function show(targetid){
var obj = document.getElementById(targetid);
if (obj.style.display == "block" ) {
obj.style.display = "none";
}else if (obj.style.display == "none" ) {
obj.style.display = "block";
}
}
</script>
</head><body>
<ul>
<li id="A" onclick="show('ID1')">aaa</li>
<li id="B" onclick="show('ID2')">bbb</li>
<li id="B" onclick="show('ID3')">ccc</li>
</ul><div id= "ID1" style=" display:none; width:200; height:200; background-color:#00CCFF">
aaaa
</div><div id= "ID2" style=" display:none; width:200; height:200; background-color:#ff0000">
bbbb
</div><div id= "ID3" style=" display:none; width:200; height:200; background-color:#ffff00">
cccc
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript">
function show(targetid){
var obj = document.getElementById(targetid);
/*
if (obj.style.display == "block" ) {
obj.style.display = "none";
}else if (obj.style.display == "none" ) {
obj.style.display = "block";
}
*/
if (targetid=="ID1")
{
if (document.getElementById("ID1").style.display == "block" ) {
document.getElementById("ID1").style.display= "none";
}else if (document.getElementById("ID1").style.display == "none" ) {
document.getElementById("ID1").style.display="block";
}
document.getElementById("ID2").style.display="none";
document.getElementById("ID3").style.display="none";
}else if (targetid=="ID2")
{
document.getElementById("ID2").style.display="block";
document.getElementById("ID1").style.display="none";
document.getElementById("ID3").style.display="none";
}else if (targetid=="ID3")
{
document.getElementById("ID3").style.display="block";
document.getElementById("ID1").style.display="none";
document.getElementById("ID2").style.display="none";
}}
</script>
</head><body>
<ul>
<li id="A" onclick="show('ID1')">aaa</li>
<li id="B" onclick="show('ID2')">bbb</li>
<li id="B" onclick="show('ID3')">ccc</li>
</ul><div id= "ID1" style=" display:none; width:200; height:200; background-color:#00CCFF">
aaaa
</div><div id= "ID2" style=" display:none; width:200; height:200; background-color:#ff0000">
bbbb
</div><div id= "ID3" style=" display:none; width:200; height:200; background-color:#ffff00">
cccc
</div>
</body>
</html>
可以自己再优化下
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript">var show = function(){
var prev;
return function(targetid){
if(prev == targetid) return;
else if( prev ){
document.getElementById( prev ).style.display = 'none';
}
document.getElementById( targetid ).style.display = '';
prev = targetid;
}
}()
</script>
</head><body>
<ul>
<li id="A" onclick="show('ID1')">aaa</li>
<li id="B" onclick="show('ID2')">bbb</li>
<li id="B" onclick="show('ID3')">ccc</li>
</ul><div id= "ID1" style=" display:none; width:200; height:200; background-color:#00CCFF">
aaaa
</div><div id= "ID2" style=" display:none; width:200; height:200; background-color:#ff0000">
bbbb
</div><div id= "ID3" style=" display:none; width:200; height:200; background-color:#ffff00">
cccc
</div>
</body>
</html>
function show( objId , objNumber ){
for(i = 1; i <= objNumber ; i++){
var objId_2 = "ID"+i;
if( objId_2 != objId){
document.getElementById(objId_2 ).style.display = 'none';
}
else{
document.getElementById(objId_2 ).style.display = 'block';
}
}
}
</script><ul>
<li id="A" onclick="show('ID1',3)">aaa</li>
<li id="B" onclick="show('ID2',3)">bbb</li>
<li id="B" onclick="show('ID3',3)">ccc</li>
</ul>