点击按钮，div隐藏

请教——
点击“销售”，红色部分的div隐藏，能用css的尽量不用JS
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>店员</title>
<link href="css/global.css" rel="stylesheet" type="text/css" />
<link href="css/layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="layout">
    <div id="head">
        <ul id="nav" class="tab" >
            <li ><a href="#">查询</a></li>
            <li ><a href="#">销售</a></li>
        </ul>
    </div>
    <div id="center">
        
        <div id="center-left">
            <ul id="nav-sub" class="tab">
                <li ><a href="#">销售情况</a></li>
                <li ><a href="#">库存情况</a></li>
                <li ><a href="#">退货情况</a></li>
            </ul>
        </div>
             
    <div id="content"></div>
    </div>
</div>
</body>
</html>

解决方案 »

  1.   

    额，俺css水平不是很强，就弄js吧
    function HiddenDiv() {
      var hiddenDiv = document.getElementById("center-left");
      hiddenDiv.style.display = "none";
    }把销售的onclick事件添加为HiddenDiv();
      

  2.   

    只能用JS，仅CSS肯定实现不了，牵涉到点击事件，
    建议用jquery，还有动画效果，淡入淡出
    <li ><a id="xs" href="#">销售</a></li>
    $('#xs').click(
       $('#center-left').fadeOut('slow'))
      

  3.   

    知道是display:none
    这个div原本就有一个css,
    #center-left{ width:120px; height:300px; float:left;}
    我现在要实现点了“销售”后，它才隐藏
    这个display:none该写在什么位置？？
      

  4.   

    以上几种都是可以的，但是不知道是需要什么效果，一般来说display：none就可以了
      

  5.   

       function test()
       {
           document.getElementById("center-left").style.display="none";
       }
    调用这个方法就可以啊
      

  6.   

    其实一楼的是可以的，点了后那个div确实不见了，但后面的那个<div id="content"></div>
    却飘了过来，取代了消失的那个div的位置三楼的jquery也试了，很遗憾，不知道为什么没成功。在这里还是对各位的帮助表示感谢
      

  7.   


    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>店员</title>
    <link href="css/global.css" rel="stylesheet" type="text/css" />
    <link href="css/layout.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    #nav a.click:active  {
    border: 1px solid red;
    }
    </style>
    </head>
    <body>
    <div id="layout">
    <div id="head">
    <ul id="nav" class="tab">
    <li>
    <a href="#">查询</a>
    </li>
    <li>
    <a href="#" class="click" onclick="document.getElementById('center-left').style.visibility  = 'hidden';">销售</a>
    </li>
    </ul>
    </div>
    <div id="center"> <div id="center-left">
    <ul id="nav-sub" class="tab">
    <li>
    <a href="#">销售情况</a>
    </li>
    <li>
    <a href="#">库存情况</a>
    </li>
    <li>
    <a href="#">退货情况</a>
    </li>
    </ul>
    </div> <div id="content"></div>
    </div>
    </div>
    </body>
    </html>
      

  8.   

    你是不是搞笑啊
    <a href="#" class="click" onclick="document.getElementById('center-left').style.visibility  = 'hidden';">销售</a>
    onclick不是JS吗？
      

  9.   

    <script type="text/javascript">
    function $$(divID){return document.getElementById(divID);}
    function hideDiv(divID)
    {
      $$(divID).style.cssText="visibility:hidden;";
    }
    function showDiv(divID)
    {
      $$(divID).style.cssText="visibility:visible;";
    }
    window.onload=function(){
      $$("nav").getElementsByTagName("li")[0].onclick=function(){showDiv("center-left")};
      $$("nav").getElementsByTagName("li")[1].onclick=function(){hideDiv("center-left")};
    }
    </script>
      

  10.   

    theforever兄，淡定淡定，别伤着了
      

  11.   

    不用js咋整，干嘛不用js呀！！！
    其实不用js也可以实现，那就是跳转到另外一个页面……
      

  12.   

    jQuery$("#center-left").animate({opacity:0});
    设置div center-left 透明,这样<div id="content"></div>就不会过来了.
      

  13.   

    display = "none" 的话会把DIV连位置也一起隐藏
    display = "hidden" 只是隐然内容但是位置还在的
      

  14.   

    参见[css探索之旅]：http://blog.doyoe.com/article.asp?id=225