javascript - 单击时切换 div(更喜欢 CSS，但 Jquery 也可以)

Question

这几天一直困扰着我。我正试图为此找到一个纯 CSS 解决方案，但 JQUERY 也很好。我希望在我的页面上默认有一个每月价格表，并在有人点击链接时立即将表格切换为“每年”，反之亦然。

这是 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>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>

提前致谢

更新:

这是解决方案的链接 http://jsfiddle.net/8TRAe/1/

特别感谢 Tamil Vendhan

Answer 1

首先为您的链接分配 ID

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

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

你的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

为此，请在您的 HTML 中将 style="display:none" 设置为每年

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