跪求高手指导，鼠标单击事件

woaiwanb 2012-11-29 11:21: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看但不起效果，火狐有效。在这里先谢谢各位大神了！跪求解决方法。

...全文

125 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

woaiwanb 2012-11-30

打赏
举报

只是想两个效果同时实现就那么难嚒？点击图片1为隐藏右侧+转换成图片2，点击图片2为显示右侧+转换成图片1，如此循环。没大神帮助我了嚒？等多一天吧，明天没大神解答就结了。

woaiwanb 2012-11-29

打赏
举报

对大神来说不难，但我是新手，有人帮帮我么，把两个效果结合，即“关闭边栏”文字后总是图1，“打开边栏”文字后总是图2，无论点文字或是图片都能达到2个效果一起实现，就是把“关闭边栏”和图1看成一个整体，“打开边栏”与图2是令一个整体。

吉普赛的歌社区高级成员 T9 2012-11-29

打赏
举报

需要说明的是：效果二中，一般来说，不要根据　if (img.src == "/images/2.gif")　来判断，因为某些web服务器在构建img标签时，会把img的src解析成 http://xxx/2.gif 全称. 所以你的判断在第一次很可能会失效。至于效果一与效果二的联动，并不难，你自己去做吧，我也不大理解你的意思。

吉普赛的歌社区高级成员 T9 2012-11-29

打赏
举报

效果二：

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

吉普赛的歌社区高级成员 T9 2012-11-29

打赏
举报

效果一：

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