css jquery hide one div, show another

问题

I am having a challenge. I have 2 divs, one set to display:none; in the css when the page loads I have two corresponding links. When the user clicks on link1 I would like to show div1 and hide div2. And when the user clicks on link2 I would like to show div2 and hide div1.

I have not been able to get this to work! Any help much appreciated. S

回答1:

Here an example:

$(function () {
  $(".div1, .div2").hide();

  $(".link1, .link2").bind("click", function () {
    $(".div1, .div2").hide();        

    if ($(this).attr("class") == "link1")
    {
      $(".div1").show();
    }
    else
    {
      $(".div2").show();
    }
  });

});

And here is the Demo

回答2:

Firstly,please provide the HTML for your question, whenever you ask one here.

Secondly, you could do something like..

<script>
$(document).ready(function(){
    $("#div1").hide();
    $("#link1").on("click",function(){
        $("#div1").show();
        $("#div2").hide();
    });
    $("#link2").on("click",function(){
        $("#div2").show();
        $("#div1").hide();
    });
});
</script>

回答3:

Depending on your HTML structure

if something like this

<a href='#'>link1</a>
<a href='#'>link2</a>
<div> div for link 1</div>
<div> div for link 2</div>

then jQuery code would look like this

$('a').click(function(e){
    $('div').eq($(this).index()).show();
    $('div').not($('div').eq($(this).index()).hide();
});

http://jsfiddle.net/NXdyb/

回答4:

Are you deadset on jquery? This can be done simply with normal old JavsScript.

function switchVisible() {

if (document.getElementById['div1'].style.visibility == 'visible') {
    document.getElementById['div1'].style.visibility = 'hidden';
    document.getElementById['div2'].style.visibility = 'visible';
}
else {
    document.getElementById['div1'].style.visibility = 'visible';
    document.getElementById['div2'].style.visibility = 'hidden';
}

}

Then have in your link1:

<a href="/blah" onclick="javascript:switchVisible();">

回答5:

This is a very simple principle...you can achieve it many ways, this is just one example.

Ignore the selectors, I'm lazy.

The HTML ->

<a href="#"> Show Div 1 </a> | <a href="#"> Show Div 2 </a>
<br/><br/>
<div id="div1"> Div 1 </div>
<div id="div2"> Div 2 </div>

The CSS ->

#div1{
  display:none;   
}

The jQuery ->

$('a:eq(0)').click(function(){
  $('#div1').toggle();
  $('#div2').toggle();    
});
$('a:eq(1)').click(function(){
  $('#div2').toggle();
  $('#div1').toggle();   
});

回答6:

Have a look at this example it might help you out: http://jsfiddle.net/MUtPy/2/ ^^ There are many ways to do this in Jquery but this example should certainly get u started =)

回答7:

That fiddle helped me, it is really understandable : http://jsfiddle.net/bipen/zBdFQ/1/

$("#link1").click(function(e) {
  e.preventDefault();
  $("#div1").slideDown(slow);
  $("#div2").slideUp(slow);
});

$("#link2").click(function(e) {
  e.preventDefault();
  $("#div1").slideUp(slow);
  $("#div2").slideDown(slow);
});

来源：https://stackoverflow.com/questions/11761049/css-jquery-hide-one-div-show-another

标签

jquery

css

hide

show