Using JQuery how to show and hide different div's onClick event

前端未结

关注

 12  638

死守一世寂寞

I would like to show a div based on the Onclick event of an link.

First Click - Show div1
Second Click - Hide remaining div\'s and Show div2
Third Click

相关标签:

12条回答

一向

2021-01-03 04:04

First You have to add query basic file:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Then you have to add the following code:

<script type="text/javascript">
    $(document).ready(function () {
        $("#hide").click(function(){
            $(".slider_area").hide(1000);
            $("#show").css("display","block");
            $("#hide").css("display","none");
        });
        $("#show").click(function(){
            $(".slider_area").show(1000);
            $("#show").css("display","none");
            $("#hide").css("display","block");
        });
    });
</script>

Add the code above into the header portion and the code below in the body portion.

<img src="images/hide-banner.png" id="hide" class="link right"/>
<img src="images/show-banner.png" id="show" class="link right dis" />

The code is ready for the different image click for show and hide div.

0 讨论(0)

礼貌的吻别

2021-01-03 04:09

I'll try my shot.

EDIT: After second though, to avoid global variable use it's better to do the following

$(document).ready(function() {
        $("#toggle_value").click((function(){
        var counter = 0;
        return function()
        {
           $("#div" + counter).hide("fast");
           counter = (counter % 3) + 1;
           $("#div" + counter).show("fast");
        }
        })());
});

0 讨论(0)

旧巷少年郎

2021-01-03 04:10

How about this

Working Example here - add /edit to URL to edit the code

$('html').addClass('js'); // prevent hiding divs on DOM ready from 'flashing'

$(function() {

  var counter = 1;

  $('#toggle_value').click(function() {
    $('div','#container')
      // to stop current animations - clicking really fast could originally
      // cause more than one div to show 
      .stop() 
      // hide all divs in the container
      .hide() 
      // filter to only the div in question
      .filter( function() { return this.id.match('div' + counter); })
      // show the div 
      .show('fast');

    // increment counter or reset to 1 if counter equals 3
    counter == 3? counter = 1 : counter++; 

    // prevent default anchor click event
    return false; 

  });

});

and HTML

<!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" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title>Div Example</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">

    body { background-color: #fff; font: 16px Helvetica, Arial; color: #000; }
    .display { width:300px; height:200px; border: 2px solid #000; }
    .js .display { display:none; }

</style>
</head>
<body>
<div class="toggle_button">
      <a href="#" id="toggle_value">Toggle</a>
</div>
<br/>
<div id='container'>
    <div id='div1' class='display' style="background-color: red;"> 
        div1
    </div>

    <div id='div2' class='display' style="background-color: green;"> 
        div2
    </div>

    <div id='div3' class='display' style="background-color: blue;"> 
        div3
    </div>
<div>

</body>
</html>

This could easily be wrapped up in a plugin

0 讨论(0)

清酒与你

2021-01-03 04:13

$("#toggle_value").click(function()
{
   $("#div" + (++c) % 3).show().siblings().hide();        
}

0 讨论(0)

别那么骄傲

2021-01-03 04:18

<div id="div_<%=id>">
</div>
<div id="Hide_<%=id>" style="display:none;">
</div>
<div id="div_<%=id>">
</div>
<div id="Hide_<%=id>" style="display:none;">
</div>
<div id="div_<%=id>">
</div>
<div id="Hide_<%=id>" style="display:none;">
</div>
<div id="div_<%=id>">
</div>
<div id="Hide_<%=id>" style="display:none;">
</div>
<script>
var temp = 0;
var temp1 = 0;
$("#div_<%=id>").click(function(){
    if (temp1 == 0)  {
        $('#' + temp).hide();
        temp = 'Hide_<%=id>';
        $('#Hide_<%=id>').show();
        temp1 = 1;
        }
        else{
        $('#' + temp).hide();   
        temp = 'Hide_<%=id>';
        $('#Hide_<%=id>').show();
        temp1 = 0;
        }
});
</script>

0 讨论(0)

余生分开走

2021-01-03 04:19

My solution is a little different - I'd do it dependant on the state of the divs at the current time (on click). See below for what I mean by this.

$(document).ready(function() {
    $("#toggle_value").click(function(){
       if ($("#div1).is(':visible')) { // Second click
            // Hide all divs and show d2
            $("#div1").hide();
            $("#div2").show("fast");
            $("#div3").hide();
            $("#div4").hide();
       } else if ($("#div2").is(':visible')) { // Third click
            // follow above example for hiding all and showing div3
       } else if ($("#div3").is(':visible')) { // Fouth click
            // follow above example for hiding all and showing div1
       } else { // first click
            // All divs should be hidden first. Show div1 only.
            $("#div1").show("fast");
       }
    });
});

Just to warn you - I have not tested this code :) Based upon the following for determining visibility: http://docs.jquery.com/Frequently_Asked_Questions#How_do_I_determine_the_state_of_a_toggled_element.3F

Hope it helps

0 讨论(0)

上一页 1 2