Форум

AlienVampire · #1 (**permalink**) 02.05.2016, 16:37

Нужно чтобы при загрузке страницы отображались не все элементы фильтров, а элементы нужного фильтра (то есть чтоб он был активным). Опыта и знаний не хватает, нужна помощь. Заранее спасибо.
JS

$(window).load(function() {
        var e = $(".fltr").isotope({
            itemSelector: "li"
                    

        });
        $("#pricefilters").on("click", "button", function() {
            var t = $(this).attr("data-filter");
            e.isotope({
                filter: t
            })
        }), $(".button-group").each(function(e, t) {
            var i = $(t);
            i.on("click", "button", function() {
                i.find(".is-checked").removeClass("is-checked"), $(this).addClass("is-checked")
            })

        }), $(function() {
            $("#da-thumbs").find("> li").each(function() {
                $(this).hoverdir({
                    hoverDelay: 75
               })
            })
        })
    }),

HTML

<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>           
        
         
                      
             <ul id=da-thumbs class="da-thumbs1 fltr">

               <li data-category=design class=design>
               <div class=section-content>
               <div class=row>
                  <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>

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

      </section>

рони · #2 (**permalink**) 02.05.2016, 20:28

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>

AlienVampire · #3 (**permalink**) 02.05.2016, 21:33

Большое спасибо, все работает)

Форум

Справочник

Discord чат

Курсы javascript