javascript - Switch divs on click (prefer CSS but Jquery is ok too) - Stack Overflow

admin管理员组

文章数量:1314252

this has doing my head in for a couple of days now. I am trying to find a pure CSS solution for this but JQUERY is good as well. I would like to have a monthly price table by default on my page and switch the table with "Yearly" as soon as someone clicks on the link and vice versa..

Here is the HTML mark-up:

<div class="pricing_table" id="monthly">
   <ul>
     <li>Basic</li>
     <li><a href="" class="buy_now">Subscribe Now</a></li>
   </ul>
   <ul style="background-color:#CCCCCC;">
   <h2>Monthly Plans</h2><a>Click here to switch to the "Yearly Plans"</a></ul>
</div>
<div class="pricing_table" id="yearly">
   <ul>
     <li>Basic</li>
     <li><a href="" class="buy_now">Subscribe Now</a></li>
   </ul>
   <ul style="background-color:#CCCCCC;">
   <h2>Yearly Plans</h2><a>Click here to switch to the "Monthly Plans"</a></ul>
</div>

Thanks in advance

Update:

Here is a link to the solution /

Special Thanks to Tamil Vendhan

this has doing my head in for a couple of days now. I am trying to find a pure CSS solution for this but JQUERY is good as well. I would like to have a monthly price table by default on my page and switch the table with "Yearly" as soon as someone clicks on the link and vice versa..

Here is the HTML mark-up:

<div class="pricing_table" id="monthly">
   <ul>
     <li>Basic</li>
     <li><a href="" class="buy_now">Subscribe Now</a></li>
   </ul>
   <ul style="background-color:#CCCCCC;">
   <h2>Monthly Plans</h2><a>Click here to switch to the "Yearly Plans"</a></ul>
</div>
<div class="pricing_table" id="yearly">
   <ul>
     <li>Basic</li>
     <li><a href="" class="buy_now">Subscribe Now</a></li>
   </ul>
   <ul style="background-color:#CCCCCC;">
   <h2>Yearly Plans</h2><a>Click here to switch to the "Monthly Plans"</a></ul>
</div>

Thanks in advance

Update:

Here is a link to the solution http://jsfiddle/8TRAe/1/

Special Thanks to Tamil Vendhan

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Jun 30, 2013 at 12:41 Webnerdoz asked Jun 30, 2013 at 10:32 WebnerdozWebnerdoz 16522 gold badges66 silver badges1515 bronze badges

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 3

Assign ids to your links first

<a id="yearlyPlan">Click here to switch to the "Yearly Plans"</a>

<a  id="monthlyPlan">Click here to switch to the "Monthly Plans"</a>

Your JS:

$("#yearlyPlan").click(function(event) {
  $("#monthly").hide();
  $("#yearly").show();
});

$("#monthlyPlan").click(function(event) {
  $("#monthly").show();
  $("#yearly").hide();
});

I would like to have a monthly price table by default on my page

To do that, set style="display:none" to yearly in your HTML

<div class="pricing_table" id="yearly" style="display:none">

HTML:

<div class="pricing_table" id="monthly">
<ul>
<li>Basic</li>
<li><a href="" class="buy_now">Subscribe Now</a></li>
</ul>
<ul style="background-color:#CCCCCC;">
<h2>Monthly Plans</h2><a class='plansSwitch' href='#yearly'>Click here to switch to the "Yearly Plans"</a></ul>
</div>
<div class="pricing_table" id="yearly">
<ul>
<li>Basic</li>
<li><a href="" class="buy_now">Subscribe Now</a></li>
</ul>
<ul style="background-color:#CCCCCC;">
<h2>Yearly Plans</h2><a class='plansSwitch' href='#monthly'>Click here to switch to the "Monthly Plans"</a></ul>
</div>

JS:

var $plansHolders = $('#monthly, #yearly').hide();
$('#monthly').show();
$('.plansSwitch').click(function() {
  var href = $(this).attr('href');
  $plansHolders.hide();
  $(href).show();
});

Fiddle

Seems to be what you need:

jQuery:

$("#monthly a:not(.buy_now)").click(function(event) {
  $("#monthly").hide();
  $("#yearly").show();
});

Better, of course, to assign some class to "click here for yearly" link and filter by that instead of :not()

easist will be giving a same class to both your link <a>..

using jquery,

$(function(){
 $('#yearly').hide();
 $('.aClass').click(function(){
   $('.pricing_table').hide();
   $(this).parents('.pricing_table').show();
 });
});

Another example

HTML

<div class="pricing_table" id="monthly">
    <ul>
        <li>Basic</li>
        <li><a href="" class="buy_now">Subscribe Now</a></li>
    </ul>
    <ul style="background-color:#CCCCCC;">
        <h2>Monthly Plans</h2><a href="#" id="yearly-link">Click here to switch to the "Yearly Plans"</a></ul>
</div>
<div class="pricing_table" id="yearly" style='display: none;'>
    <ul>
        <li>Basic</li>
        <li><a href="" class="buy_now">Subscribe Now</a></li>
    </ul>
    <ul style="background-color:#CCCCCC;">
        <h2>Yearly Plans</h2><a href='#' id='monthly-link'>Click here to switch to the "Monthly Plans"</a></ul>
</div>
<script src="http://ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js"></script>

JS

$('#monthly-link').click(function(e) {
    e.preventDefault();
    $('#yearly').hide();
    $('#monthly').show();
});

$('#yearly-link').click(function(e) {
    e.preventDefault();
    $('#monthly').hide();
    $('#yearly').show();
});

Here's a CSS-only solution using radio buttons. Should work okay for IE9+.

http://jsfiddle/cyuEw/

CSS

input[type="radio"], #yearly + div, #monthly + div{
    display: none;
}

input:checked + div {
    display: block !important;
}

HTML

<input id="yearly" type="radio" name="toggle" checked>
<div class="pricing_table">
   <ul>
     <li>Basic</li>
     <li><a href="" class="buy_now">Subscribe Now</a></li>
   </ul>
   <ul style="background-color:#CCCCCC;">
   <h2>Monthly Plans</h2><label for="monthly">Click here to switch to the "Yearly Plans"</label></ul>
</div>
<input id="monthly" type="radio" name="toggle">
<div class="pricing_table">
   <ul>
     <li>Basic</li>
     <li><a href="" class="buy_now">Subscribe Now</a></li>
   </ul>
   <ul style="background-color:#CCCCCC;">
   <h2>Yearly Plans</h2><label for="yearly">Click here to switch to the "Monthly Plans"</label></ul>
</div>

本文标签： javascriptSwitch divs on click (prefer CSS but Jquery is ok too)Stack Overflow