Показать сообщение отдельно
  #2 (permalink)  
Старый 02.05.2016, 20:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,134

Isotope Активный фильтр
AlienVampire,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .is-checked{
       background-color: #FFD700;
  }

 </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.0/isotope.pkgd.js"></script>
</script>
  <script>
 $(window).load(function(){

 var e = $(".fltr").isotope({
            itemSelector: "li"
        });
      var b = $("#pricefilters button");
  b.on("click", function() {
            var t = $(this).attr("data-filter");
            e.isotope({
                filter: t
            });
            b.removeClass("is-checked");
            $(this).addClass("is-checked")

        }).filter(".is-checked").click()


})
  </script>
</head>

<body>
<section id=pricing class="section pricing">
         <div class=container>
            <header class=section-heading>
               <h2>Наши цены</h2>
               <span>Хорошее качество по низкой цене</span>
            </header>


               <div class=main_content1>
                  <div class=isotop-filter id=pricefilters><button type=button class="btn btn-isotop is-checked" data-filter=".design">Вконтакте</button> <button type=button class="btn btn-isotop" data-filter=".wordpress">Facebook</button> <button type=button class="btn btn-isotop" data-filter=".marketing">Лого</button> <button type=button class="btn btn-isotop" data-filter=".brandidentity">Визитки</button></div>
               </div>


            <div class=section-content>
               <div class=row>
             <ul id=da-thumbs class="da-thumbs1 fltr">

               <li data-category=design class=design>

                  <div class="col-md-3 col-sm-6">
                     <div class=price-box>
                        <h3>Эконом</h3>
                        <div class=price-info>
                           <div class=price><sup>₽</sup>1399</div>
                              <div class=price-txt>Up to 5 pages</div>
                              <div class=price-txt>1 year hosting</div>
                              <div class=price-txt>3 months support</div>
                              <div class=disabled> SEO</div>
                              <div class=disabled> Secrity &amp; Backup</div>
                              <div class=disabled>24/7 Support</div>
                             </div>
                        <a href=# class="btn btn-default">Заказать</a>
                     </div>
                  </div>
                  </li>


                     <li data-category=marketing class=marketing>
                       <div class="col-md-3 col-sm-6">
                     <div class=price-box>
                        <h3>Премиум</h3>
                        <div class=price-info>
                           <div class=price><sup>₽</sup>1999</div>
                              <div class=price-txt>Up to 5 pages</div>
                              <div class=price-txt>1 year hosting</div>
                              <div class=price-txt>3 months support</div>
                              <div class=disabled> SEO</div>
                              <div class=disabled> Secrity &amp; Backup</div>
                              <div class=disabled>24/7 Support</div>
                             </div>
                        <a href=# class="btn btn-default">Заказать</a>
                     </div>
                  </div>



                 </li>
                 </ul>
               </div>
            </div>


            </div>

      </section>


</body>
</html>
Ответить с цитированием