点击 jQuery 时显示新定价 table
Show new pricing table on click with jQuery
我需要在网站上有两个定价 table，但只有一个 active/showing。
它需要像滑块一样运行，因此当单击箭头时，将加载并显示下一个定价 table。
我需要一些可以与 Bootstrap 一起使用的片段 3.
我正在使用 table http://bootsnipp.com/snippets/featured/bootstrap-30-responsive-pricing-tables 和 table 的代码：
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<!-- PRICE ITEM -->
<div class="panel price panel-red">
<div class="panel-heading text-center">
<h3>PRO PLAN</h3>
</div>
<div class="panel-body text-center">
<p class="lead" style="font-size:40px"><strong> / month</strong></p>
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item"><i class="icon-ok text-danger"></i> Personal use</li>
<li class="list-group-item"><i class="icon-ok text-danger"></i> Unlimited projects</li>
<li class="list-group-item"><i class="icon-ok text-danger"></i> 27/7 support</li>
</ul>
<div class="panel-footer">
<a class="btn btn-lg btn-block btn-danger" href="#">BUY NOW!</a>
</div>
</div>
<!-- /PRICE ITEM -->
</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<!-- PRICE ITEM -->
<div class="panel price panel-blue">
<div class="panel-heading arrow_box text-center">
<h3>DEV PLAN</h3>
</div>
<div class="panel-body text-center">
<p class="lead" style="font-size:40px"><strong> / month</strong></p>
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item"><i class="icon-ok text-info"></i> Personal use</li>
<li class="list-group-item"><i class="icon-ok text-info"></i> Unlimited projects</li>
<li class="list-group-item"><i class="icon-ok text-info"></i> 27/7 support</li>
</ul>
<div class="panel-footer">
<a class="btn btn-lg btn-block btn-info" href="#">BUY NOW!</a>
</div>
</div>
<!-- /PRICE ITEM -->
</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<!-- PRICE ITEM -->
<div class="panel price panel-green">
<div class="panel-heading arrow_box text-center">
<h3>FREE PLAN</h3>
</div>
<div class="panel-body text-center">
<p class="lead" style="font-size:40px"><strong>[=12=] / month</strong></p>
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item"><i class="icon-ok text-success"></i> Personal use</li>
<li class="list-group-item"><i class="icon-ok text-success"></i> Unlimited projects</li>
<li class="list-group-item"><i class="icon-ok text-success"></i> 27/7 support</li>
</ul>
<div class="panel-footer">
<a class="btn btn-lg btn-block btn-success" href="#">BUY NOW!</a>
</div>
</div>
<!-- /PRICE ITEM -->
</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<!-- PRICE ITEM -->
<div class="panel price panel-grey">
<div class="panel-heading arrow_box text-center">
<h3>FREE PLAN</h3>
</div>
<div class="panel-body text-center">
<p class="lead" style="font-size:40px"><strong>[=12=] / month</strong></p>
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item"><i class="icon-ok text-success"></i> Personal use</li>
<li class="list-group-item"><i class="icon-ok text-success"></i> Unlimited projects</li>
<li class="list-group-item"><i class="icon-ok text-success"></i> 27/7 support</li>
</ul>
<div class="panel-footer">
<a class="btn btn-lg btn-block btn-primary" href="#">BUY NOW!</a>
</div>
</div>
<!-- /PRICE ITEM -->
</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<!-- PRICE ITEM -->
<div class="panel price panel-white">
<div class="panel-heading arrow_box text-center">
<h3>FREE PLAN</h3>
</div>
<div class="panel-body text-center">
<p class="lead" style="font-size:40px"><strong>[=12=] / month</strong></p>
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item"><i class="icon-ok text-success"></i> Personal use</li>
<li class="list-group-item"><i class="icon-ok text-success"></i> Unlimited projects</li>
<li class="list-group-item"><i class="icon-ok text-success"></i> 27/7 support</li>
</ul>
<div class="panel-footer">
<a class="btn btn-lg btn-block btn-default" href="#">BUY NOW!</a>
</div>
</div>
<!-- /PRICE ITEM -->
</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<!-- PRICE ITEM -->
<div class="panel price panel-white">
<div class="panel-heading arrow_box text-center">
<h3>FREE PLAN</h3>
</div>
<div class="panel-body text-center">
<p class="lead" style="font-size:40px"><strong>[=12=] / month</strong></p>
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item"><i class="icon-ok text-success"></i> Personal use</li>
<li class="list-group-item"><i class="icon-ok text-success"></i> Unlimited projects</li>
<li class="list-group-item"><i class="icon-ok text-success"></i> 27/7 support</li>
</ul>
<div class="panel-footer">
<a class="btn btn-lg btn-block btn-default" href="#">BUY NOW!</a>
</div>
</div>
<!-- /PRICE ITEM -->
</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<!-- PRICE ITEM -->
<div class="panel price panel-white">
<div class="panel-heading arrow_box text-center">
<h3>FREE PLAN</h3>
</div>
<div class="panel-body text-center">
<p class="lead" style="font-size:40px"><strong>[=12=] / month</strong></p>
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item"><i class="icon-ok text-success"></i> Personal use</li>
<li class="list-group-item"><i class="icon-ok text-success"></i> Unlimited projects</li>
<li class="list-group-item"><i class="icon-ok text-success"></i> 27/7 support</li>
</ul>
<div class="panel-footer">
<a class="btn btn-lg btn-block btn-default" href="#">BUY NOW!</a>
</div>
</div>
<!-- /PRICE ITEM -->
</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<!-- PRICE ITEM -->
<div class="panel price panel-white">
<div class="panel-heading arrow_box text-center">
<h3>FREE PLAN</h3>
</div>
<div class="panel-body text-center">
<p class="lead" style="font-size:40px"><strong>[=12=] / month</strong></p>
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item"><i class="icon-ok text-success"></i> Personal use</li>
<li class="list-group-item"><i class="icon-ok text-success"></i> Unlimited projects</li>
<li class="list-group-item"><i class="icon-ok text-success"></i> 27/7 support</li>
</ul>
<div class="panel-footer">
<a class="btn btn-lg btn-block btn-default" href="#">BUY NOW!</a>
</div>
</div>
<!-- /PRICE ITEM -->
</div>
</div>
</div>
我刚刚使用了 bootstrap 旋转木马，并将你所有的 pricing table 保留在旋转木马的每个项目中，在看到结果后我假设，这就是你想要的！！这里的代码太长 post 所以我只 post 这个 DEMO FIDDLE for your reference and this FULL SCREEN RESULT 来检查响应能力。
我需要在网站上有两个定价 table，但只有一个 active/showing。
它需要像滑块一样运行，因此当单击箭头时，将加载并显示下一个定价 table。
我需要一些可以与 Bootstrap 一起使用的片段 3.
我正在使用 table http://bootsnipp.com/snippets/featured/bootstrap-30-responsive-pricing-tables 和 table 的代码：
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<!-- PRICE ITEM -->
<div class="panel price panel-red">
<div class="panel-heading text-center">
<h3>PRO PLAN</h3>
</div>
<div class="panel-body text-center">
<p class="lead" style="font-size:40px"><strong> / month</strong></p>
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item"><i class="icon-ok text-danger"></i> Personal use</li>
<li class="list-group-item"><i class="icon-ok text-danger"></i> Unlimited projects</li>
<li class="list-group-item"><i class="icon-ok text-danger"></i> 27/7 support</li>
</ul>
<div class="panel-footer">
<a class="btn btn-lg btn-block btn-danger" href="#">BUY NOW!</a>
</div>
</div>
<!-- /PRICE ITEM -->
</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<!-- PRICE ITEM -->
<div class="panel price panel-blue">
<div class="panel-heading arrow_box text-center">
<h3>DEV PLAN</h3>
</div>
<div class="panel-body text-center">
<p class="lead" style="font-size:40px"><strong> / month</strong></p>
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item"><i class="icon-ok text-info"></i> Personal use</li>
<li class="list-group-item"><i class="icon-ok text-info"></i> Unlimited projects</li>
<li class="list-group-item"><i class="icon-ok text-info"></i> 27/7 support</li>
</ul>
<div class="panel-footer">
<a class="btn btn-lg btn-block btn-info" href="#">BUY NOW!</a>
</div>
</div>
<!-- /PRICE ITEM -->
</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<!-- PRICE ITEM -->
<div class="panel price panel-green">
<div class="panel-heading arrow_box text-center">
<h3>FREE PLAN</h3>
</div>
<div class="panel-body text-center">
<p class="lead" style="font-size:40px"><strong>[=12=] / month</strong></p>
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item"><i class="icon-ok text-success"></i> Personal use</li>
<li class="list-group-item"><i class="icon-ok text-success"></i> Unlimited projects</li>
<li class="list-group-item"><i class="icon-ok text-success"></i> 27/7 support</li>
</ul>
<div class="panel-footer">
<a class="btn btn-lg btn-block btn-success" href="#">BUY NOW!</a>
</div>
</div>
<!-- /PRICE ITEM -->
</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<!-- PRICE ITEM -->
<div class="panel price panel-grey">
<div class="panel-heading arrow_box text-center">
<h3>FREE PLAN</h3>
</div>
<div class="panel-body text-center">
<p class="lead" style="font-size:40px"><strong>[=12=] / month</strong></p>
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item"><i class="icon-ok text-success"></i> Personal use</li>
<li class="list-group-item"><i class="icon-ok text-success"></i> Unlimited projects</li>
<li class="list-group-item"><i class="icon-ok text-success"></i> 27/7 support</li>
</ul>
<div class="panel-footer">
<a class="btn btn-lg btn-block btn-primary" href="#">BUY NOW!</a>
</div>
</div>
<!-- /PRICE ITEM -->
</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<!-- PRICE ITEM -->
<div class="panel price panel-white">
<div class="panel-heading arrow_box text-center">
<h3>FREE PLAN</h3>
</div>
<div class="panel-body text-center">
<p class="lead" style="font-size:40px"><strong>[=12=] / month</strong></p>
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item"><i class="icon-ok text-success"></i> Personal use</li>
<li class="list-group-item"><i class="icon-ok text-success"></i> Unlimited projects</li>
<li class="list-group-item"><i class="icon-ok text-success"></i> 27/7 support</li>
</ul>
<div class="panel-footer">
<a class="btn btn-lg btn-block btn-default" href="#">BUY NOW!</a>
</div>
</div>
<!-- /PRICE ITEM -->
</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<!-- PRICE ITEM -->
<div class="panel price panel-white">
<div class="panel-heading arrow_box text-center">
<h3>FREE PLAN</h3>
</div>
<div class="panel-body text-center">
<p class="lead" style="font-size:40px"><strong>[=12=] / month</strong></p>
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item"><i class="icon-ok text-success"></i> Personal use</li>
<li class="list-group-item"><i class="icon-ok text-success"></i> Unlimited projects</li>
<li class="list-group-item"><i class="icon-ok text-success"></i> 27/7 support</li>
</ul>
<div class="panel-footer">
<a class="btn btn-lg btn-block btn-default" href="#">BUY NOW!</a>
</div>
</div>
<!-- /PRICE ITEM -->
</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<!-- PRICE ITEM -->
<div class="panel price panel-white">
<div class="panel-heading arrow_box text-center">
<h3>FREE PLAN</h3>
</div>
<div class="panel-body text-center">
<p class="lead" style="font-size:40px"><strong>[=12=] / month</strong></p>
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item"><i class="icon-ok text-success"></i> Personal use</li>
<li class="list-group-item"><i class="icon-ok text-success"></i> Unlimited projects</li>
<li class="list-group-item"><i class="icon-ok text-success"></i> 27/7 support</li>
</ul>
<div class="panel-footer">
<a class="btn btn-lg btn-block btn-default" href="#">BUY NOW!</a>
</div>
</div>
<!-- /PRICE ITEM -->
</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<!-- PRICE ITEM -->
<div class="panel price panel-white">
<div class="panel-heading arrow_box text-center">
<h3>FREE PLAN</h3>
</div>
<div class="panel-body text-center">
<p class="lead" style="font-size:40px"><strong>[=12=] / month</strong></p>
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item"><i class="icon-ok text-success"></i> Personal use</li>
<li class="list-group-item"><i class="icon-ok text-success"></i> Unlimited projects</li>
<li class="list-group-item"><i class="icon-ok text-success"></i> 27/7 support</li>
</ul>
<div class="panel-footer">
<a class="btn btn-lg btn-block btn-default" href="#">BUY NOW!</a>
</div>
</div>
<!-- /PRICE ITEM -->
</div>
</div>
</div>
我刚刚使用了 bootstrap 旋转木马，并将你所有的 pricing table 保留在旋转木马的每个项目中，在看到结果后我假设，这就是你想要的！！这里的代码太长 post 所以我只 post 这个 DEMO FIDDLE for your reference and this FULL SCREEN RESULT 来检查响应能力。