我正在尝试调整eBussinesTemplate的方式,以使一个部分中的链接激活#portfolio部分中的选定数据。 在这个特定示例中,我想在单击下面的链接后激活data-filter == one。
<div id="services" class="services-area area-padding">
<a href="#portfolio">
<img src="img/products/3page-img1.jpg" alt=""></a>
还有数据过滤器:
<!-- Start portfolio Area -->
<div id="portfolio" class="portfolio-area area-padding fix">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="section-headline text-center">
<!-- Start Portfolio -page -->
<div class="awesome-project-1 fix">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="awesome-menu ">
<ul class="project-menu">
<li>
<a href="#" class="active" data-filter="*">All</a>
</li>
<li>
<a href="#" data-filter=".one">one</a>
</li>
<li>
<a href="#" data-filter=".two">Two</a>
</li>
JS:
/*----------------------------
isotope active
------------------------------ */
// portfolio start
$(window).on("load", function() {
var $container = $('.awesome-project-content');
$container.isotope({
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
var pro_menu = $('.project-menu li a');
pro_menu.on("click", function() {
var pro_menu_active = $('.project-menu li a.active');
pro_menu_active.removeClass('active');
$(this).addClass('active');
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
return false;
});
});
//portfolio end