Javascript 单击时切换div（更喜欢CSS，但Jquery也可以）

这已经让我头疼了好几天了。我试图找到一个纯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>

基本的



月计划


年度计划

特别感谢泰米尔文丹似乎正是您所需要的：

jQuery：

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

当然，最好是将一些类分配给“单击此处查看年度”链接，并根据该链接进行筛选，而不是
：not（）
，这似乎是您需要的：

jQuery：

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

当然，最好将一些类指定给“单击此处查看年度”链接，并按该链接进行筛选，而不是
：not（）
HTML:
HTML：
首先为链接分配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>

我想在我的页面上默认有一个月度价格表

为此，在HTML中将
style=“display:none”
设置为每年一次

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

首先为链接分配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>

我想在我的页面上默认有一个月度价格表

为此，在HTML中将
style=“display:none”
设置为每年一次

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

easist将为两个链接提供相同的类

使用jquery

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

easist将为两个链接提供相同的类

使用jquery

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

另一个例子

HTML

另一个例子

HTML

这里有一个使用单选按钮的CSS专用解决方案。对于IE9+应该可以正常工作


CSS
HTML


基本的



月度计划单击此处切换到“年度计划”

基本的



年度计划单击此处切换到“月度计划”
这里有一个使用单选按钮的CSS专用解决方案。对于IE9+应该可以正常工作


CSS
HTML


基本的



月度计划单击此处切换到“年度计划”

基本的



年度计划单击此处切换到“月度计划”
开关工作正常，但默认情况下，我只想显示“每月”价格并隐藏“每年”@MohammadMoezzi：你检查过我的小提琴了吗，它和你想要的一模一样。是的，伙计，小提琴工作起来很有魅力，但我不知道为什么这两张桌子都出现在我的网站上。当我点击月刊的时候，这个开关就工作了。实际上，两者都是一样的。你确定
JS
在
$（文档）里面了吗？准备好了（函数（）{/**JS code需要在这里**/}）
？
把它添加到
头
块开关工作了，但默认情况下我只想显示“每月”价格并隐藏“每年”@MohammadMoezzi：你检查过我的小提琴了吗，这和你想要的完全一样。是的，伙计，小提琴很有魅力，但我不知道为什么这两张桌子都出现在我的网站上。当我点击月刊的时候，这个开关就工作了。实际上，两者都是一样的。您确定
JS
在
$（document.ready）中（function（）{/**JS code需要在这里**/}）
？
将它添加到
头
块中
$('#monthly-link').click(function(e) {
    e.preventDefault();
    $('#yearly').hide();
    $('#monthly').show();
});

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

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

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

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