带有外部链接的数据过滤器的同位素

时间:2018-11-06 18:06:01

标签: javascript html bootstrap-4

我正在尝试调整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

0 个答案:

没有答案