Активный фильтр Isotope
Нужно чтобы при загрузке страницы отображались не все элементы фильтров, а элементы нужного фильтра (то есть чтоб он был активным). Опыта и знаний не хватает, нужна помощь. Заранее спасибо.
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 & 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 & 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>
|
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 & 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 & 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>
|
Большое спасибо, все работает)
|
| Часовой пояс GMT +3, время: 14:55. |