刷新時，所有圖像選項卡都會跳轉並顯示在頁面上

Question

我首先遇到問題，這是我正在處理的代碼

<section id="portfolio">
    <div class="container">
        <div class="center">
           <h2>Products</h2>
           <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut <br> et dolore magna aliqua. Ut enim ad minim veniam</p>
        </div>


        <ul class="portfolio-filter text-center">
            <li><a class="btn btn-default " href="#" data-filter="*">All Works</a></li>
            <li><a class="btn btn-default" href="#" data-filter=".bootstrap">Creative</a></li>
            <li><a class="btn btn-default" href="#" data-filter=".html">Photography</a></li>
            <li><a class="btn btn-default active" href="#" data-filter=".wordpress">Web Development</a></li>
        </ul><!--/#portfolio-filter-->

        <div class="row">
            <div class="portfolio-items">
                <div class="portfolio-item apps col-xs-12 col-sm-4 col-md-3">
                    <div class="recent-work-wrap">
                        <img class="img-responsive" src="images/portfolio/recent/item1.png" alt="">
                        <div class="overlay">
                            <div class="recent-work-inner">
                                <h3><a href="#">Business theme</a></h3>
                                <p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
                                <a class="preview" href="images/portfolio/full/item1.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
                            </div> 
                        </div>
                    </div>
                </div><!--/.portfolio-item-->

                <div class="portfolio-item joomla bootstrap col-xs-12 col-sm-4 col-md-3">
                    <div class="recent-work-wrap">
                        <img class="img-responsive" src="images/portfolio/recent/item2.png" alt="">
                        <div class="overlay">
                            <div class="recent-work-inner">
                                <h3><a href="#">Business theme</a></h3>
                                <p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
                                <a class="preview" href="images/portfolio/full/item2.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
                            </div> 
                        </div>
                    </div>          
                </div><!--/.portfolio-item-->

                <div class="portfolio-item bootstrap wordpress col-xs-12 col-sm-4 col-md-3">
                    <div class="recent-work-wrap">
                        <img class="img-responsive" src="images/portfolio/recent/item3.png" alt="">
                        <div class="overlay">
                            <div class="recent-work-inner">
                                <h3><a href="#">Business theme</a></h3>
                                <p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
                                <a class="preview" href="images/portfolio/full/item3.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
                            </div> 
                        </div>
                    </div>        
                </div><!--/.portfolio-item-->

                <div class="portfolio-item joomla wordpress apps col-xs-12 col-sm-4 col-md-3">
                    <div class="recent-work-wrap">
                        <img class="img-responsive" src="images/portfolio/recent/item4.png" alt="">
                        <div class="overlay">
                            <div class="recent-work-inner">
                                <h3><a href="#">Business theme</a></h3>
                                <p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
                                <a class="preview" href="images/portfolio/full/item4.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
                            </div> 
                        </div>
                    </div>           
                </div><!--/.portfolio-item-->

                <div class="portfolio-item joomla html bootstrap col-xs-12 col-sm-4 col-md-3">
                    <div class="recent-work-wrap">
                        <img class="img-responsive" src="images/portfolio/recent/item5.png" alt="">
                        <div class="overlay">
                            <div class="recent-work-inner">
                                <h3><a href="#">Business theme</a></h3>
                                <p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
                                <a class="preview" href="images/portfolio/full/item5.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
                            </div> 
                        </div>
                    </div>      
                </div><!--/.portfolio-item-->

                <div class="portfolio-item wordpress html apps col-xs-12 col-sm-4 col-md-3">
                    <div class="recent-work-wrap">
                        <img class="img-responsive" src="images/portfolio/recent/item6.png" alt="">
                        <div class="overlay">
                            <div class="recent-work-inner">
                                <h3><a href="#">Business theme</a></h3>
                                <p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
                                <a class="preview" href="images/portfolio/full/item6.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
                            </div> 
                        </div>
                    </div>         
                </div><!--/.portfolio-item-->

                <div class="portfolio-item wordpress html col-xs-12 col-sm-4 col-md-3">
                    <div class="recent-work-wrap">
                        <img class="img-responsive" src="images/portfolio/recent/item7.png" alt="">
                        <div class="overlay">
                            <div class="recent-work-inner">
                                <h3><a href="#">Business theme</a></h3>
                                <p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
                                <a class="preview" href="images/portfolio/full/item7.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
                            </div> 
                        </div>
                    </div>          
                </div><!--/.portfolio-item-->

                <div class="portfolio-item wordpress html bootstrap col-xs-12 col-sm-4 col-md-3">
                    <div class="recent-work-wrap">
                        <img class="img-responsive" src="images/portfolio/recent/item8.png" alt="">
                        <div class="overlay">
                            <div class="recent-work-inner">
                                <h3><a href="#">Business theme</a></h3>
                                <p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
                                <a class="preview" href="images/portfolio/full/item8.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
                            </div> 
                        </div>
                    </div>          
                </div><!--/.portfolio-item-->
            </div>
        </div>
    </div>
</section><!--/#portfolio-item-->

如您所見，它是一個投資組合頁面，並且具有隨機圖像，當您單擊數據過濾器時，它將向您顯示該部分的圖像，但是我遇到的問題是，當我重新加載頁面時，所有圖像都會跳轉進入頁面，我將全部顯示多少圖像，這不好，我想做的是，例如，如果我僅重新加載頁面並且自動出現“ Creative images”標簽圖像，那我就很費勁關於如何做到這一點，這是我的JavaScript代碼

// portfolio filter
$(window).load(function(){'use strict';
    var $portfolio_selectors = $('.portfolio-filter >li>a');
    var $portfolio = $('.portfolio-items');
    $portfolio.isotope({
        itemSelector : '.portfolio-item',
        layoutMode : 'fitRows'
    });

    $portfolio_selectors.on('click', function(){
        $portfolio_selectors.removeClass('active');
        $(this).addClass('active');
        var selector = $(this).attr('data-filter');
        $portfolio.isotope({ filter: selector });
        return false;
    });
});

任何答復將非常有幫助，謝謝。

Answer 1

演示

初始化中的filter: '.bootstrap'將隱藏所有其他div。 初始化同位素時可以使用filter選項。

// portfolio filter
var $portfolio_selectors = $('.portfolio-filter >li>a');
var $portfolio = $('.portfolio-items');
$portfolio.isotope({
    itemSelector: '.portfolio-item',
    layoutMode: 'fitRows',
    filter: '.bootstrap'
});

$portfolio_selectors.on('click', function () {
    $portfolio_selectors.removeClass('active');
    $(this).addClass('active');
    var selector = $(this).attr('data-filter');
    $portfolio.isotope({
        filter: selector
    });
    return false;
});