用JS如何设置2个层的相互隐藏

如：显示A层,B层隐藏，显示B层，A层隐藏。

解决方案 »

  1.   


    <html>
    <head>
    <style type="text/css">   
    #jing li a { display:block; }   
    #jing li div { display:none;}   
    </style>  
    <script> 
    function jing()   
    {   
    var a = event.srcElement.nextSibling.style;   
    a.display=a.display=='block'? 'none':'block';   
    }   
    </script>  
    </head>
    <body>
    <ul id="jing">  
    <li>  
    <a href="javascript:void(0);" onclick="jing()">点击显示详细</a><div>我就是详细内容</div> </li>  
    </ul>  
     
    </body></html>
      

  2.   


    //不兼容firefox另写<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>a test</title>
    <style type="text/css">   
    #jing li a { display:block; }   
    #jing li div { display:none;}   
    </style>  
    <script> 
    function show(event)   
    {   
    var _a= event.target || event.srcElement;   
    var a = _a.nextSibling.style;   
    a.display=a.display=='block'? 'none':'block';     
    }   
    </script>  
    </head>
    <body>
    <ul id="jing">  
    <li>  
    <a href="javascript:void(0);" onclick="show(event)">点击显示详细</a><div>我就是详细内容</div>
    </ul>  
     
    </body></html>
      

  3.   

    这个是兼容IE与 firefox恶魔
      

  4.   

    你这样写是点击A可以显示B，但是你的A没有隐藏啊应该是 显示A ，B隐藏  ，显示B，A隐藏
      

  5.   

    恩，或者<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">
    function mouseOver()
    {
    document.b1.src ="http://www.w3school.com.cn/i/eg_mouse.jpg";
    }
    function mouseOut()
    {
    document.b1.src ="http://www.w3school.com.cn/i/eg_mouse2.jpg";
    }
    </script>
    </head><body>
    <a href="/index.html" target="_blank">
    <img border="0" alt="Visit W3School!" src="http://www.w3school.com.cn/i/eg_mouse2.jpg" name="b1"  onmouseover="mouseOver()" onmouseout="mouseOut()" /></a>
    </body>
    </html>参考
    http://www.w3school.com.cn/tiy/t.asp?f=jseg_animation
      

  6.   

    其实本来进入界面后A与B都是隐藏的，先通过别的按钮触发到B，然后B里有个收起的点击后，隐藏B显示A
      

  7.   

    if($("#dvA").css("display")=='none')
    {
    $("#dvB").show();
    }
    else
    {
    $("#dvB").hide();
    }
    if($("#dvB").css("display")=='none')
    {
    $("#dvA").show();
    }
    else
    {
    $("#dvA").hide();
    }
      

  8.   

    ......
    jquery 很方便
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <title>a test</title>
    <style type="text/css">   
    #nv{ display:none; }  
    #nv #div1{color:red}
    #nv #div2{ display:none; color:#blue;}    
    </style>  
    <script>
    jQuery(function($) {
     $("#clicks").toggle(
    function () {
    $('#nv').css({"display":"block"});
    },
    function () {
    $('#nv').css({"display":"none"});
    }
    );
    ClickShowHide("#div1","#div2");
    ClickShowHide("#div2","#div1");
    function ClickShowHide(EID1,EID2){
    $(EID1).click(function(event){
    var ShowHideClick=$(this);
    if(!ShowHideClick.is(":hidden")){
    ShowHideClick.hide("slide");
    $(EID2).show(500);
    }
    event.stopPropagation();
    });
    }
    });
    </script>
    </head><body>
    <button id='clicks'>点击</button>
    <div id="nv">
    <div id='div1' >我就是详细内容1</div>
    <div id='div2' >我就是详细内容2</div>
    </div>
    </body>
    </html>
      

  9.   


    <!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=gb2312" />
    <title>无标题文档</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
    $(document).ready(function(){
        $("#btn").click(function(){
             $("#chaxun").fadeIn(1000);
        });
    });</script>
    </head>
    <body>
    <div id="chaxun" style="display:none">查询显示</div>
    <input type="button" value="查询" id="btn" />
    </body>
    </html>