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

本帖最后由 woaiwanb 于 2012-11-29 13:43:52 编辑

解决方案 »

  1.   

    效果一：
    <!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>
      

  2.   

    效果二：
    <!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>
      

  3.   

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