Javascript hide/show layers_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-17 18:04 出处：网络

I am working with hiding and showing divs in javascript, basically I want to show one div, then when a button is clicked hide that div and show another. I can\'t quite figure the javascript out here\'

I am working with hiding and showing divs in javascript, basically I want to show one div, then when a button is clicked hide that div and show another. I can't quite figure the javascript out here's what I have at the moment but the second layer isnt showing when I click hide.

  <script language=javascript type='text/javascript'> 
    function hidediv() { 
    if (document.getElementById) { // DOM3 = IE5, NS6 
    document.getElementById('layer').style.visibility = 'hidden'; 
    document.getElementById('topbar').style.visibility = 'visisble';
    } 
    else { 
    if (document.layers) { // Netscape 4 
    document.layer.visibility = 'hidden'; 
    document.topbar.visibility = 'visible'; 

    } 
    else { // IE 4 
    document.all.layer.style.visibility = 'hidden'; 
    document.all.topba开发者_JAVA技巧r.style.visibility = 'visible'; 
    } 
    } 
    }

    function showdiv() { 
    if (document.getElementById) { // DOM3 = IE5, NS6 
    document.getElementById('layer').style.visibility = 'visible'; 
 document.getElementById('topbar').style.visibility = 'hidden';
    } 
    else { 
    if (document.layers) { // Netscape 4 
    document.layer.visibility = 'visible'; 
document.topbar.visibility = 'hidden'; 
    } 
    else { // IE 4 
    document.all.layer.style.visibility = 'visible'; 
document.all.topbar.style.visibility = 'hidden';
    } 
    } 
    } 
    </script>

and css:

 #topbar {
    background-image: url(images/back.png);
background-repeat: repeat;
height: 30px;
margin-top: 20px;
visibility: hidden;
}

#show {
    float: right;
    padding-right: 40px;
    padding-top: 10px;
}

#hide {
    float: right;
    padding-right: 40px;
}

#layer {
background-image: url(images/back.png);
background-repeat: repeat;
padding-left: 20px;
padding-bottom:20px;
overflow: auto;
}

using standard html links like:

<a href="javascript:hidediv()">Hide</a>

Any help would be appreciated, cheers!

EDIT

okay switched to something completely new but it seems to not show after hiding

<script type="text/javascript">

$(function(){ $('#showhide').click(function(){ $('#layer').toggle(); $('#topbar').toggle(); }); });

and

<a href="javascript:void(0);" id="showhide">Show/Hide</a>

and

<div id="layer"></div>

You dont need jQuery for this.

Your functions could look like this:

function hideElement(elementId)
{
 document.getElementById(elementId).style.display = 'none';
}
function showElement(elementId)
{
 document.getElementById(elementId).style.display = 'block';
}

Then on page load, or in the css you can hide the first div. When the click happens you can then use showElement to show it.

This will probably help you: http://api.jquery.com/hide/ or the http://api.jquery.com/toggle/.

EDIT:

I am hoping that following example will help you.

<!DOCTYPE html>
<html>
<head>
  <script language="javascript" type="text/javascript" src="jquery.js"></script>
  <script language="javascript" type="text/javascript">
  $(document).ready(function(){

    $("#button").click(function(){

         $("#a").toggle();
         $("#b").toggle();

     });

  });
  </script>
</head>
<body>
  <div id="a">
    I am a.
  </div>

  <div id="b" style="display: none">
  I am b.
  </div>

  <div id="button">
    <button>Show/Hide</button>
  </div>
</body>

</html>