1. дома
  2. Вопрос и ответ
  3. Показать новую таблицу цен при щелчке с помощью jQuery

Показать новую таблицу цен при щелчке с помощью jQuery

2015-04-27 2 views
4

Мне нужно иметь две таблицы цен на веб-сайте, но иметь только один активный/показ.Показать новую таблицу цен при щелчке с помощью jQuery

Он должен функционировать как слайдер, поэтому при нажатии стрелки следующая таблица цен загружается и отображается.

мне нужно некоторое сниппет для этого, который будет работать с Bootstrap 3.

Я использую эту таблицу http://bootsnipp.com/snippets/featured/bootstrap-30-responsive-pricing-tables и код для таблицы:

<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>$10/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>$20/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>$0/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>$0/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>$0/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>$0/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>$0/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>$0/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>

источник

2015-04-27 pevoje

+2

Что вы искали? Где ваш код? Пожалуйста, напишите, что вы пробовали, и ваш текущий код, чтобы мы могли помочь. –

+0

Скрытая таблица загружается с каждым нажатием кнопки? –

+0

@JoelAlmeida У меня есть только html-код для таблицы. Мне не удалось найти нужную функцию jQuery для загрузки моей следующей таблицы. Я добавил код в исходное сообщение – pevoje

ответ

2

Я просто использовал самозагрузки каруселью и сохранил все ваши pricing table внутри каждого элемента карусели, и, увидев результат, я просто предполагаю, что это то, что вы хотите! Код слишком длинный, чтобы опубликовать здесь. Так что я просто отправлю это DEMO FIDDLE для вашей справки и это FULL SCREEN RESULT, чтобы проверить на отзывчивость.

источник

2015-04-27 09:12:53

+0

спасибо за предложение карусели BT. Это то, что мне нужно! – pevoje

+0

Отличный !! Счастливое кодирование .. :) –

Смежные вопросы

 Смежные вопросы