求javascript高手帮我解决下，我想要个点击事件和一个选中事件来回替换div样式。
有n个div，首先默认第一个与其它几个样式不同，当点击第二个div时，第一个默认的样式就会还原成与其它样式一样。还有当鼠标移到div上时会出现hover属性，但选中的那个...
有n个div，首先默认第一个与其它几个样式不同，当点击第二个div时，第一个默认的样式就会还原成与其它样式一样。还有当鼠标移到div上时会出现hover属性，但选中的那个div不会有hover属性。如下图：
希望是用javascript写而不是jquery写的，还有兼容下浏览器。谢谢（注：其实我这里有一个这样的效果，只是ie不兼容，如果哪位大神有时间可以帮我调下，谢谢） 展开
希望是用javascript写而不是jquery写的，还有兼容下浏览器。谢谢（注：其实我这里有一个这样的效果，只是ie不兼容，如果哪位大神有时间可以帮我调下，谢谢） 展开
2个回答
展开全部
<html>
<head>
<title>Hover</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
font-size: 11pt;
}
div{
float: left;
width: 100px;
margin-right: 20px;
padding: 5px;
border: 1px solid #999;
background-color: #eee;
}
/* 鼠标悬停样式，有些IE浏览器不支持hover伪类 */
div.hover{
color: red;
}
/* 被点击后的样式 */
div.click{
border: 1px solid #ef0;
background-color: #ffc;
}
</style>
<script type="text/javascript">
window.onload = function(){
// 找到div集合
var div = document.getElementsByTagName('div');
var i = 0, len = div.length;
for(;i<len;i++){
// 鼠标进入
div[i].onmouseover = function(){
if(this.className != 'click'){
this.className = 'hover';
}
}
// 鼠标移出
div[i].onmouseout = function(){
if(this.className != 'click'){
this.className = '';
}
}
// 鼠标点击
div[i].onclick = function(){
for(var j=0;j<len;j++){
div[j].className = '';
}
this.className = 'click';
}
}
}
</script>
</head>
<body>
<div class="click">我是示例div，鼠标滑过我就可以变成我的样式。</div>
<div>我是示例div，鼠标滑过我就可以变成我的样式。</div>
<div>我是示例div，鼠标滑过我就可以变成我的样式。</div>
<div>我是示例div，鼠标滑过我就可以变成我的样式。</div>
<div>我是示例div，鼠标滑过我就可以变成我的样式。</div>
</body>
</html>
更多追问追答
追问
大神 你这个能不能再稍微改下，在这些div块外加个div包起来，这样别的div就不会继承div的样式了
追答
百度真垃圾！
css部分改成这样：
*{
padding: 0;
margin: 0;
font-size: 11pt;
}
div#box div{
float: left;
width: 100px;
margin-right: 20px;
padding: 5px;
border: 1px solid #999;
background-color: #eee;
}
/* 鼠标悬停样式，有些IE浏览器不支持hover伪类 */
div#box div.hover{
color: red;
}
/* 被点击后的样式 */
div#box div.click{
border: 1px solid #ef0;
background-color: #ffc;
}
js部分改一句就行：
// 找到div集合
var div = document.getElementById('box').getElementsByTagName('div');
html部分，加个div：
我是示例div，鼠标滑过我就可以变成我的样式。
我是示例div，鼠标滑过我就可以变成我的样式。
我是示例div，鼠标滑过我就可以变成我的样式。
我是示例div，鼠标滑过我就可以变成我的样式。
我是示例div，鼠标滑过我就可以变成我的样式。
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<style>
#bg>div {
height:100px;
width:100px;
background-color:#CCC;
float:left;
margin:10px;
}
#bg .clicked {
background-color:#FFC;
}
#bg>div.clicked:hover{
background-color:#FFC;
}
#bg>div:hover{ background-color:#AAA;
}
</style>
<div id="bg">
<div id="div1" class="clicked"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
<div id="div6"></div>
<div id="div7"></div>
</div>
<script >
target=document.getElementById("bg").getElementsByTagName("div");
for(var i=0;i<target.length;i++){
target.item(i).onclick=clickStyle;
}
function clickStyle(e){
var evt = e || window.event;
var eventSrc = evt.target||evt.srcElement;
for(var i=0;i<target.length;i++){
if(target.item(i).id==eventSrc.id) document.getElementById(eventSrc.id).className="clicked";
else target.item(i).className="";
}
}
</script>
#bg>div {
height:100px;
width:100px;
background-color:#CCC;
float:left;
margin:10px;
}
#bg .clicked {
background-color:#FFC;
}
#bg>div.clicked:hover{
background-color:#FFC;
}
#bg>div:hover{ background-color:#AAA;
}
</style>
<div id="bg">
<div id="div1" class="clicked"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
<div id="div6"></div>
<div id="div7"></div>
</div>
<script >
target=document.getElementById("bg").getElementsByTagName("div");
for(var i=0;i<target.length;i++){
target.item(i).onclick=clickStyle;
}
function clickStyle(e){
var evt = e || window.event;
var eventSrc = evt.target||evt.srcElement;
for(var i=0;i<target.length;i++){
if(target.item(i).id==eventSrc.id) document.getElementById(eventSrc.id).className="clicked";
else target.item(i).className="";
}
}
</script>
更多追问追答
追问
高手还在吗，能不能#bg里面的div不用id，改用class可以吗》
追答
function clickStyle(e){
var evt = e || window.event;
var eventSrc = evt.target||evt.srcElement;
for(var i=0;i<target.length;i++){
if(target.item(i)==eventSrc) target.item(i).className="clicked";
else target.item(i).className="";
}
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
