根据DIV的CLICK边框显示问题

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %><!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 runat="server">
    <title>无标题页</title>
    <style type="text/css">
        #z_left{ border-bottom:solid 1px red; border-left:solid 1px red; border-top:solid 1px red; width:198px; float:left; height:300px;}
        #z_right1{ border-top:solid 1px red; border-right:solid 1px red; width:765px; float:right; height:310px;}
        #z_right2{ border-bottom:solid 1px red; width:765px; border-right:solid 1px red; border-left:solid 1px red; margin-left:198px; margin-top:0px; height:150px;}
        #z_left_1{ width:197px; border-bottom:solid 1px red; height:30px;}
        #z_left_2{ width:197px; border-bottom:solid 1px red; border-right:solid 1px red; height:30px;}
        #z_left_3{ width:197px; border-bottom:solid 1px red; border-right:solid 1px red; height:30px;}
        #z_left_4{ width:197px; border-bottom:solid 1px red; border-right:solid 1px red; height:30px;}
        #z_left_5{ width:197px; border-bottom:solid 1px red; border-right:solid 1px red; height:30px;}
        #z_left_6{ width:197px; border-bottom:solid 1px red; border-right:solid 1px red; height:30px;}
        #z_left_7{ width:197px; border-bottom:solid 1px red; border-right:solid 1px red; height:30px;}
        #z_left_8{ width:197px; border-bottom:solid 1px red; border-right:solid 1px red; height:30px;}
        #z_left_9{ width:197px; border-bottom:solid 1px red; border-right:solid 1px red; height:30px;}
        #z_left_10{ width:197px; border-right:solid 1px red; height:30px;}
    </style>
</head>
<body style="margin:0px;">
    <form id="form1" runat="server">
    <div>
        <div style="width:965px;">
            <div id="z_left">
                <div id="z_left_1" onclick="divClick(this)">共产堂</div>
                <div id="z_left_2" onclick="divClick(this)">共产堂</div>
                <div id="z_left_3" onclick="divClick(this)">共产堂</div>
                <div id="z_left_4" onclick="divClick(this)">共产堂</div>
                <div id="z_left_5" onclick="divClick(this)">共产堂</div>
                <div id="z_left_6" onclick="divClick(this)">共产堂</div>
                <div id="z_left_7" onclick="divClick(this)">共产堂</div>
                <div id="z_left_8" onclick="divClick(this)">共产堂</div>
                <div id="z_left_9" onclick="divClick(this)">共产堂</div>
                <div id="z_left_10" onclick="divClick(this)">共产堂</div>
            </div>            <div id="z_right1"></div>
            <div id="z_right2"></div>
        </div>
        <div style="bottom:1px;">
            
        </div>
    </div>
    </form>
</body>
</html>
红色部分。
求大虾帮忙写个js
我想单击一个层(#z_left里的DIV)让他的border-right不显示，其他的9个层显示。
初始值是第一个层的border-right不显示，其他的显示。

解决方案 »

  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 runat="server">
        <title>无标题页 </title>
        <style type="text/css">
            #z_left{ border-bottom:solid 1px red; border-left:solid 1px red; border-top:solid 1px red; width:198px; float:left; height:300px;}
            /*
    #z_right1{ border-top:solid 1px red; border-right:solid 1px red; width:765px; float:right; height:310px;}
            #z_right2{ border-bottom:solid 1px red; width:765px; border-right:solid 1px red; border-left:solid 1px red; margin-left:198px; margin-top:0px; height:150px;}
    */
            #z_left_1{ width:197px; border-bottom:solid 1px red; height:30px;}
            #z_left_2{ width:197px; border-bottom:solid 1px red; border-right:solid 1px red; height:30px;}
            #z_left_3{ width:197px; border-bottom:solid 1px red; border-right:solid 1px red; height:30px;}
            #z_left_4{ width:197px; border-bottom:solid 1px red; border-right:solid 1px red; height:30px;}
            #z_left_5{ width:197px; border-bottom:solid 1px red; border-right:solid 1px red; height:30px;}
            #z_left_6{ width:197px; border-bottom:solid 1px red; border-right:solid 1px red; height:30px;}
            #z_left_7{ width:197px; border-bottom:solid 1px red; border-right:solid 1px red; height:30px;}
            #z_left_8{ width:197px; border-bottom:solid 1px red; border-right:solid 1px red; height:30px;}
            #z_left_9{ width:197px; border-bottom:solid 1px red; border-right:solid 1px red; height:30px;}
            #z_left_10{ width:197px; border-right:solid 1px red; height:30px;}
        </style>
    </head>
    <body style="margin:0px;">
        <form id="form1" runat="server">
        <div>
            <div style="width:965px;">
                <div id="z_left">
                    <div id="z_left_1" onclick="divClick(this)">共产堂 </div>
                    <div id="z_left_2" onclick="divClick(this)">共产堂 </div>
                    <div id="z_left_3" onclick="divClick(this)">共产堂 </div>
                    <div id="z_left_4" onclick="divClick(this)">共产堂 </div>
                    <div id="z_left_5" onclick="divClick(this)">共产堂 </div>
                    <div id="z_left_6" onclick="divClick(this)">共产堂 </div>
                    <div id="z_left_7" onclick="divClick(this)">共产堂 </div>
                    <div id="z_left_8" onclick="divClick(this)">共产堂 </div>
                    <div id="z_left_9" onclick="divClick(this)">共产堂 </div>
                    <div id="z_left_10" onclick="divClick(this)">共产堂 </div>
                </div>
    <div id="z_right1"> </div>
                <div id="z_right2"> </div>
            </div>
            <div style="bottom:1px;">
               
            </div>
        </div>
        </form>

    <script type="text/javascript">
    var oldDiv = null;
    function divClick(sender) {
    if (oldDiv == sender) return;
    if (oldDiv)
    oldDiv.style.borderRight = "solid 1px red";
    oldDiv = sender;
    oldDiv.style.borderRight = "none";
    }
    divClick(document.getElementById("z_left_1"));
    </script>
    </body>
    </html> 
      

  2.   

    非常感谢。
    问下。
    if(oldDiv == sender) return;是什么意思。
      

  3.   

    if (oldDiv) 这个不明白。
    还有刚才我理解sender成事件源了，应该不是吧。应该只是个变量。
      

  4.   

    divClick(this)function divClick(sender)sender不过是你参数名，即onclick="divClick(this)"传递的thisoldDiv为最近一次操作的div
    if(oldDiv == sender) return; 这里表示如果点击相同的div没有必要再处理样式if (oldDiv)
    只是为避免当oldDiv为null访问了无效的属性。
      

  5.   

    if (oldDiv) 
    只是为避免当oldDiv为null访问了无效的属性。在我的理解当中if(oldDiv)这样是判断true/false.
    难道oldDiv=null就是false?