1

这已经让我头疼了几天了。我正在尝试为此找到一个纯 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/

特别感谢泰米尔文丹

4

6 回答 6

3

首先为您的链接分配 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();
});

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

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

<div class="pricing_table" id="yearly" style="display:none">
于 2013-06-30T10:39:26.787 回答
2

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();
});

小提琴

于 2013-06-30T10:38:38.873 回答
1

似乎是你需要的：

jQuery :

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

当然，最好将某些课程分配给“每年单击此处”链接并按该链接进行过滤，而不是:not()

于 2013-06-30T10:36:12.840 回答
0

这是一个使用单选按钮的纯 CSS 解决方案。应该适用于 IE9+。

http://jsfiddle.net/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>
于 2013-06-30T14:21:17.743 回答
0

easist 将为您的两个链接提供相同的课程<a>..

使用jQuery，

$(function(){
 $('#yearly').hide();
 $('.aClass').click(function(){
   $('.pricing_table').hide();
   $(this).parents('.pricing_table').show();
 });
});
于 2013-06-30T10:41:02.673 回答
0

另一个例子

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.com/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();
});
于 2013-06-30T10:44:53.980 回答