菜单列表问题

Question

我使class =“ selected”正常工作，因为该项目已突出显示。

我的问题是，我有一个列表，其中需要首先加载“选定”菜单项，这意味着带有class =“ selected”的菜单项仅在网站加载时显示其内容。 每个菜单项都加载一系列图像和视频。 单独单击每个菜单仅显示所需的图像或视频。 那很棒。

现在发生的是，当您第一次访问该网站时，每个列表中的所有项目都已加载并显示。 我必须选择另一个菜单项，它们仅在要显示的菜单项上单击我的“选定”菜单项。

我将如何访问我的网站，仅使“选定”菜单项自动加载其内容，而没有加载所有其他菜单项的内容。

任何帮助将不胜感激。

我的测试网站在这里http://shoptest.divinedreamstore.com/klc/

<!-- Portfolio Projects -->
   <div class="row">
   <div class="span3">
   <!-- Filter -->
   <nav id="options" class="work-nav">
   <ul id="filters" class="option-set" data-option-key="filter">
   <li class="type-work">Type of Work</li>
   <!--<li><a href="#filter" data-option-value="*"class="selected">All Projects</a></li>-->
   <li><a href="#filter" data-option value=".video" class="selected">Video</a></li>
   <li><a href="#filter" data-option-value=".commercials">Commercials</a></li>
   <li><a href="#filter" data-option-value=".print">Print</a></li>
   <li><a href="#filter" data-option-value=".radio">Radio</a></li>
   </ul>
                </nav>
                <!-- End Filter -->
            </div>

            <div class="span9">
                <div class="row">
                    <section id="projects">
                        <ul id="thumbs">
                            <!-- Item Project and Filter Name -->
                            <li class="item-thumbs span3 video">
                                <!-- Fancybox Media - Gallery Enabled - Title - Link to Video -->
                                <a class="hover-wrap fancybox-media" data-fancybox-group="video" title="Deland Train Depot" href="http://vimeo.com/45531383">
                                    <span class="overlay-img"></span>
                                    <span class="overlay-img-thumb font-icon-plus"></span>
                                </a>
                                <!-- Thumb Image and Description -->
                                <img src="_include/img/work/thumbs/delandtrain.jpg" alt="Video">
                            </li>
                            <!-- End Item Project -->

                            <!-- Item Project and Filter Name -->
                            <li class="item-thumbs span3 video">
                                <!-- Fancybox Media - Gallery Enabled - Title - Link to Video -->
                                <a class="hover-wrap fancybox-media" data-fancybox-group="video" title="Sanford Fire Station" href="http://vimeo.com/50231345">
                                    <span class="overlay-img"></span>
                                    <span class="overlay-img-thumb font-icon-plus"></span>
                                </a>
                                <!-- Thumb Image and Description -->
                                <img src="_include/img/work/thumbs/sanfire.jpg" alt="Video">
                            </li>
                            <!-- End Item Project -->

                            <!-- Item Project and Filter Name -->
                            <li class="item-thumbs span3 video">
                                <!-- Fancybox Media - Gallery Enabled - Title - Link to Video -->
                                <a class="hover-wrap fancybox-media" data-fancybox-group="video" title="Tavares Sea Planes" href="http://vimeo.com/59021648">
                                    <span class="overlay-img"></span>
                                    <span class="overlay-img-thumb font-icon-plus"></span>
                                </a>
                                <!-- Thumb Image and Description -->
                                <img src="_include/img/work/thumbs/seaplane.jpg" alt="Video">
                            </li>
                            <!-- End Item Project -->

                            <!-- Item Project and Filter Name -->
                            <li class="item-thumbs span3 video">
                                <!-- Fancybox Media - Gallery Enabled - Title - Link to Video -->
                                <a class="hover-wrap fancybox-media" data-fancybox-group="video" title="Drive In Christian Church" href="http://vimeo.com/59022396">
                                    <span class="overlay-img"></span>
                                    <span class="overlay-img-thumb font-icon-plus"></span>
                                </a>
                                <!-- Thumb Image and Description -->
                                <img src="_include/img/work/thumbs/drivechurch.jpg" alt="Video">
                            </li>
                            <!-- End Item Project -->

                            <!-- Item Project and Filter Name -->
                            <li class="item-thumbs span3 radio">
                                <!-- Fancybox Media - Gallery Enabled - Title - Link to Video -->
                                <a class="hover-wrap fancybox-media" data-fancybox-group="video" title="Radio Demo" href="http://vimeo.com/36597476">
                                    <span class="overlay-img"></span>
                                    <span class="overlay-img-thumb font-icon-plus"></span>
                                </a>
                                <!-- Thumb Image and Description -->
                                <img src="_include/img/work/thumbs/radiodemo.jpg" alt="Video">
                            </li>
                            <!-- End Item Project -->

                            <!-- Item Project and Filter Name -->
                            <li class="item-thumbs span3 commercials">
                                <!-- Fancybox Media - Gallery Enabled - Title - Link to Video -->
                                <a class="hover-wrap fancybox-media" data-fancybox-group="video" title="Ultra 50" href="http://vimeo.com/66639113">
                                    <span class="overlay-img"></span>
                                    <span class="overlay-img-thumb font-icon-plus"></span>
                                </a>
                                <!-- Thumb Image and Description -->
                                <img src="_include/img/work/thumbs/ultra50.jpg" alt="Video">
                            </li>
                            <!-- End Item Project -->

                            <!-- Item Project and Filter Name -->
                            <li class="item-thumbs span3 commercials">
                                <!-- Fancybox Media - Gallery Enabled - Title - Link to Video -->
                                <a class="hover-wrap fancybox-media" data-fancybox-group="video" title="Press Conference" href="http://vimeo.com/46935409">
                                    <span class="overlay-img"></span>
                                    <span class="overlay-img-thumb font-icon-plus"></span>
                                </a>
                                <!-- Thumb Image and Description -->
                                <img src="_include/img/work/thumbs/mediacom1.jpg" alt="Video">
                            </li>
                            <!-- End Item Project -->

                            <!-- Item Project and Filter Name -->
                            <li class="item-thumbs span3 print">
                                <!-- Fancybox - Gallery Enabled - Title - Full Image -->
                                <a class="hover-wrap fancybox" data-fancybox-group="print" title="" href="_include/img/work/full/print1.png">
                                    <span class="overlay-img"></span>
                                    <span class="overlay-img-thumb font-icon-plus"></span>
                                </a>
                                <!-- Thumb Image and Description -->
                                <img src="_include/img/work/thumbs/print1t.jpg" alt="">
                            </li>
                            <!-- End Item Project -->

                            <!-- Item Project and Filter Name -->
                            <li class="item-thumbs span3 print">
                                <!-- Fancybox - Gallery Enabled - Title - Full Image -->
                                <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="" href="_include/img/work/full/print2.png">
                                    <span class="overlay-img"></span>
                                    <span class="overlay-img-thumb font-icon-plus"></span>
                                </a>
                                <!-- Thumb Image and Description -->
                                <img src="_include/img/work/thumbs/print2t.jpg" alt="">
                            </li>
                            <!-- End Item Project -->

                            <!-- Item Project and Filter Name -->
                            <li class="item-thumbs span3 print">
                                <!-- Fancybox - Gallery Enabled - Title - Full Image -->
                                <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="" href="_include/img/work/full/print3.png">
                                    <span class="overlay-img"></span>
                                    <span class="overlay-img-thumb font-icon-plus"></span>
                                </a>
                                <!-- Thumb Image and Description -->
                                <img src="_include/img/work/thumbs/print3t.jpg" alt="">
                            </li>
                            <!-- End Item Project -->

                            <!-- Item Project and Filter Name -->
                            <li class="item-thumbs span3 print">
                                <!-- Fancybox - Gallery Enabled - Title - Full Image -->
                                <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="" href="_include/img/work/full/print4.png">
                                    <span class="overlay-img"></span>
                                    <span class="overlay-img-thumb font-icon-plus"></span>
   </a>
   <!-- Thumb Image and Description -->
   <img src="_include/img/work/thumbs/print4t.jpg" alt="">
   </li>
   <!-- End Item Project -->

   <!-- Item Project and Filter Name -->
   <li class="item-thumbs span3 print">
   <!-- Fancybox - Gallery Enabled - Title - Full Image -->
   <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="" href="_include/img/work/full/print5.png">
                                    <span class="overlay-img"></span>
                                    <span class="overlay-img-thumb font-icon-plus"></span>
                                </a>
                                <!-- Thumb Image and Description -->
                                <img src="_include/img/work/thumbs/print5t.jpg" alt="">
                            </li>
                            <!-- End Item Project -->

    <!-- Item Project and Filter Name -->
    <li class="item-thumbs span3 print">
    <!-- Fancybox - Gallery Enabled - Title - Full Image -->
    <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="" href="_include/img/work/full/print6.png">
                                    <span class="overlay-img"></span>
                                    <span class="overlay-img-thumb font-icon-plus"></span>
                                </a>
                                <!-- Thumb Image and Description -->
                                <img src="_include/img/work/thumbs/print6t.jpg" alt="">
                            </li>
                            <!-- End Item Project -->
                        </ul>
                    </section>

                </div>
            </div>
        </div>
        <!-- End Portfolio Projects -->
    </div>
    </div>
    <!-- End Our Work Section -->
    </div>
    </div>
    <!-- End Our Work Section -->

这是CSS

.type-work {
color: #FFFFFF;
font-size: 24px;
font-weight: 300;
margin-bottom: 30px;
line-height: 1em;
text-transform: uppercase;
}

.work-nav #filters {
margin: 0;
padding: 0;
list-style: none;
}

.work-nav #filters li {
margin: 0 0 30px 0;
padding: 0;
}

.work-nav #filters li a {
color: #7F8289;
font-size: 16px;
display: block; 
}

.work-nav #filters li a:hover {
color: #FFFFFF;
}

.work-nav #filters li a.selected {
color: #1BA8FF;
}

#thumbs {
margin: 0;
padding: 0; 
}

#thumbs li {
list-style-type: none;
}

.item-thumbs {
position: relative;
overflow: hidden;
margin-bottom: 30px;
cursor: pointer;
}

.item-thumbs a + img {
width: 99.5%;   
}

.item-thumbs .hover-wrap {
position: absolute;
display: block;
width: 100%;
height: 100%;


opacity: 0;
filter: alpha(opacity=0);

-webkit-transition: all 450ms ease-out 0s;  
   -moz-transition: all 450ms ease-out 0s;
     -o-transition: all 450ms ease-out 0s;
        transition: all 450ms ease-out 0s;

-webkit-transform: rotateY(180deg) scale(0.5,0.5);
   -moz-transform: rotateY(180deg) scale(0.5,0.5);
    -ms-transform: rotateY(180deg) scale(0.5,0.5);
     -o-transform: rotateY(180deg) scale(0.5,0.5);
        transform: rotateY(180deg) scale(0.5,0.5);  
}

.item-thumbs:hover .hover-wrap,
.item-thumbs.active .hover-wrap {
opacity: 1;
filter: alpha(opacity=100);

-webkit-transform: rotateY(0deg) scale(1,1);
   -moz-transform: rotateY(0deg) scale(1,1);
    -ms-transform: rotateY(0deg) scale(1,1);
     -o-transform: rotateY(0deg) scale(1,1);
        transform: rotateY(0deg) scale(1,1);
}

.item-thumbs .hover-wrap .overlay-img {
position: absolute;
width: 100%;
height: 100%;
background: #1BA8FF;

opacity: 0.80;
filter: alpha(opacity=80);
}

.item-thumbs .hover-wrap .overlay-img-thumb {
position: absolute;
top: 50%;
left: 50%;
margin: -16px 0 0 -16px;
color: #FFFFFF;
font-size: 32px;
line-height: 1em;

opacity: 1;
filter: alpha(opacity=100);
}

Answer 1

您可以尝试：

.type-work a:not(.selected) {
    display: none;
}

但这不会阻止加载有问题的元素，只会显示它们。

编辑：

在仔细研究了您的站点并发现您使用了同位素脚本之后，建议您改用Javascript。

尝试将同位素filter: '.selected'添加到同位素调用中，如下所示：

$container.isotope({
          // options
          animationEngine: 'best-available',
          itemSelector : '.item-thumbs',
          layoutMode : 'fitRows',
          filter: '.selected'
        });