JS CSS 显示隐藏DIV 层
我不懂JS， 你们给些力，看看这个JS，现在是用ID名的， 帮我改成 用class名 调用的，然后CSS 样式我只用写一个.class就行了
当然调用时要区分，就能写成CLASS+num 来区分，高手们帮我看看怎么写这个JS
<!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=gb2312" />
<title>无标题文档</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function toggle(targetid){
if (document.getElementById){
target=document.getElementById(targetid);
if (target.style.display=="block"){
target.style.display="none";
} else {
target.style.display="block";
}
}
}
-->
</script>
<style type="text/css">
#div1{ border:1px #06F solid;height:50px;width:100px;display:none;}
#div2{ border:1px #06F solid;height:50px;width:100px;display:none;}
a { display:block}
</style>
</head>
<body>
<a href="#" onclick="toggle('div1')">显示/隐藏</a>
<div id="div1"></div>
<a href="#" onclick="toggle('div2')">显示/隐藏</a>
<div id="div2"></div>
</body>
</html>
把ID换成class不行，因为js没法通过class控制div的属性
你可以id和class一起写啊，id用于js调用，class用来写样式
<!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=gb2312" />
<title>无标题文档</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function toggle(targetid){
if (document.getElementById){
target=document.getElementById(targetid);
if (target.style.display=="block"){
target.style.display="none";
} else {
target.style.display="block";
}
}
}
-->
</script>
<style type="text/css">
.div{ border:1px #06F solid;height:50px;width:100px;display:none;}
a { display:block}
</style>
</head>
<body>
<a href="#" onclick="toggle('div1')">显示/隐藏</a>
<div id="div1" class="div"></div>
<a href="#" onclick="toggle('div2')">显示/隐藏</a>
<div id="div2" class="div"></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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
#div1{ border:1px #06F solid;height:50px;width:100px;display:none;}
#div2{ border:1px #06F solid;height:50px;width:100px;display:none;}
a { display:block}
</style>
</head>
<body>
<a href="#" onclick="toggle('div1')">显示/隐藏</a>
<div id="div1"></div>
<a href="#" onclick="toggle('div2')">显示/隐藏</a>
<div id="div2"></div>
<script type="text/javascript">
function getElementsByClassName(className){
var elements=document.getElementsByTagName('*');
var returnElements=[];
for(var i=0;i<elements.length;i++){
var element=elments[i];
if(element.getAttribute('class').indexOf(className)){
returnElements.push(element);
}
}
return returnElements;
}
function toggle(targetClass){
if (document.getElementById){
target=getElementsByClassName(targetClass)[0];
if (target.style.display=="block"){
target.style.display="none";
} else {
target.style.display="block";
}
}
}
</script>
</body>
</html>
但用jquery可以很简单的实现，js 和jquery是差不多的脚本语言 ，你可以百度一下关于jquery.
<script type="text/javascript" src="jquery-1.3.2.js"></script> //这个必须引用
<script type="text/javascript">
$(function(){
$(".classname").toggle(
function(){ $(".content").hide();},
function(){$(".content").show()}
)
})
</script>
<body>
<a href="" class="classname">点击我</a>
<div class="content">我要隐藏</div>
</body>
