跪求高手指导，鼠标单击事件
本帖最后由 woaiwanb 于 2012-11-29 13:43:52 编辑 我现在有两个效果：一个是点击隐藏右边div的效果，但有缺点，就是载入网页成功后，第一次关闭右侧需要点击2下才能关闭，代码如下：
<script type="text/javascript">
function side(a){
if(a.innerHTML == "关闭边栏"){
document.getElementById("div2").style.display= "none";
document.getElementById("div1").style.width = "100%";
document.getElementById("div2").style.width = "0px";
a.innerHTML = "打开边栏";
}else{
document.getElementById("div2").style.display= "";
document.getElementById("div1").style.width = "75%";
document.getElementById("div2").style.width = "25%";
a.innerHTML = "关闭边栏";
}
}
</script>
<div style="margin-left: 95%;" onclick="side(this)" ><a>关闭边栏</a></div><br />
<div id="div1" style="float: left;width:75%;height:300px;background-color:#697896;word-break:break-all;">
1111111111111111111111111111111111111111111111111111111111111111111111
</div>
<div id="div2" style="float: left;width:25%;height:300px;background-color:#eeeeee;word-break:break-all;
word-wrap:break-word;" >
<br />2222222222222222222222222
</div>
然后是第二个效果，就是点击后图片转换，载入网页时默认显示图片P1，点击一下变图片P2，再点击又变回P1，如此不断循环，（图P1为叉叉，图P2为圈圈）代码如下：
<script language="javascript">
function dowith() {
var img = document.getElementById("img");
if (img.src == "/images/2.gif") {
img.src = "/images/1.gif";
// alert(img.src);
}
else {
img.src = "/images/2.gif";
// alert(img.src);
}
}
</script>
<form name="form" action="" method="post">
<button type="button" style="background: none; border: 0;" onclick="dowith();">
<img id="img" src = "/images/1.gif">
</button>
</form>
介绍完毕。重点来了，我想将效果一改为：载入完成后直接点击1下就能达到隐藏效果，而不是现在的一开始需要点击2下才能正常运作，并且在关闭边栏右边跟着带有效果二的图片，即点击一下，既隐藏右侧边栏，文字变化，图片跟着变化，再点击，开启边栏，文字变化，图片也对应变化。关闭边栏对应图P1（叉叉），开启边栏对应图P2（圈圈）。
用不用上面代码无所谓，简单而又能达到效果就好了，效果要完美支持IE的，我之前代码加进网页用IE看但不起效果，火狐有效。在这里先谢谢各位大神了！跪求解决方法。
[解决办法]
效果一：
<!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>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
//一个是点击隐藏右边div的效果，但有缺点，就是载入网页成功后，第一次关闭右侧需要点击2下才能关闭
//原来的错误：side(this)放在了div上，但div的innerHTML的初始值是包含<a></a>的，不仅是“关闭边栏”
//解决：改放在<a>标签中
function side(a){
if(a.innerHTML == "关闭边栏"){
document.getElementById("div2").style.display= "none";
document.getElementById("div1").style.width = "100%";
document.getElementById("div2").style.width = "0px";
a.innerHTML = "打开边栏";
}else{
document.getElementById("div2").style.display= "";
document.getElementById("div1").style.width = "75%";
document.getElementById("div2").style.width = "25%";
a.innerHTML = "关闭边栏";
}
}
</script>
</head>
<body>
<div style="margin-left: 90%;">
<a onclick="side(this)" style="cursor:pointer;border:1px solid red;">关闭边栏</a>
</div>
<br />
<div id="div1" style="float: left; width: 75%; height: 300px; background-color: #697896;word-break: break-all;">
1111111111111111111111111111111111111111111111111111111111111111111111
</div>
<div id="div2" style="float: left; width: 25%; height: 300px; background-color: #eeeeee;word-break: break-all; word-wrap: break-word;">
<br />
2222222222222222222222222
</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>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>
<script language="javascript">
function dowith() {
var img = document.getElementById("img");
var flag = img.getAttribute("flag");
if (flag!="1") {
img.src = "http://avatar.profile.csdn.net/2/4/F/1_woaiwanb.jpg";
img.setAttribute("flag","1");
}
else {
img.src = "http://avatar.profile.csdn.net/7/1/A/1_sharp_ice.jpg";
img.setAttribute("flag","2");
}
}
</script>
</head>
<body>
<form name="form" action="" method="post">
<button type="button" style="background: none; border: 0;" onclick="dowith();">
<img id="img" src = "http://avatar.profile.csdn.net/2/4/F/1_woaiwanb.jpg" flag="1" >
</button>
</form>
</body>
</html>
