代码之家  ›  专栏  ›  技术社区  ›  rublow

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

  •  0
  • rublow  · 技术社区  · 7 年前

    我在努力调整 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 回复  |  直到 7 年前
    推荐文章