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

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 に答える