JS CSS 显示隐藏DIV 层

我不懂JS，你们给些力，看看这个JS，现在是用ID名的，帮我改成用class名调用的，然后CSS样式我只用写一个.class就行了当然调用时要区分，就能写成CLASS+n... 我不懂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">

</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> 展开

 我来答

3个回答

#热议# 应届生在签三方时要注意什么？

嵇雨晴09V
推荐于2018-03-28 · 超过19用户采纳过TA的回答

知道答主

回答量：78

采纳率：0%

帮助的人：49.2万

我也去答题访问个人页

关注

展开全部

你这个问题，不就是不想写两遍同样的css样式么，
把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">

</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>

这样不就可以了么

已赞过 已踩过<

评论收起

island0505
2011-01-11 · TA获得超过190个赞

知道小有建树答主

回答量：93

采纳率：0%

帮助的人：102万

我也去答题访问个人页

关注

展开全部

调整了下标签的位置一般js要放在css后面最好js放在dom最后，等待dom解释完毕再执行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>
<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>

已赞过 已踩过<

评论收起

越花越有518
2011-01-11 · TA获得超过125个赞

知道答主

回答量：148

采纳率：0%

帮助的人：46.1万

我也去答题访问个人页

关注

展开全部

js没有按class找元素的功能倒是有个document.getElementById("id").className = "a" 也是需要id的

但用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>

已赞过 已踩过<

评论收起

更多回答（1）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

JS CSS 显示隐藏DIV 层

其他类似问题

为你推荐：