未加星标

Switch divs on click (prefer CSS but Jquery is ok too)

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

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.net/8TRAe/1/

Special Thanks to Tamil Vendhan

Problem courtesy of: Webnerdoz

Solution 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

Solution courtesy of: user405398

Discussion

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

Discussion courtesy of: user2536289

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

Discussion courtesy of: Khanh TO

Here's a CSS-only solution using radio buttons. Should work okay for 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>

Discussion courtesy of: thgaskell

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

Discussion courtesy of: bipen

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

Discussion courtesy of: Manoj Yadav

This recipe can be found in it's original form on Stack Over Flow .

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

代码区博客精选文章
分页:12
转载请注明
本文标题:Switch divs on click (prefer CSS but Jquery is ok too)
本站链接:https://www.codesec.net/view/611550.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(67)