菜单列表问题

Question

I have the class="selected" working correctly in the fact that the item is highlighted.

My issue is that i have a list in which I need the "selected" menu item to be loaded first, meaning that the menu item with the class="selected" shows only its contents on the load of the website. Each menu item loads a series of images and videos. On its own clicking on each menu displays only the images or videos wanted. Thats great.

What is happening right now is all items in each list are being loaded and displayed when you first go to the website. I have to select another menu item, them click back on my "selected" menu item for only that menus items to be shown.

How would i be able to go to my website and only have the "selected" menu item load its contents automatically and not have all the other menu items contents loaded.

Any help would be greatly appreciated.

my test site is here 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 -->

And this is the 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

You could try:

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

But this wouldn't prevent the loading of the elements in question, it just wouldn't display them.

EDIT:

After having a closer look at your site in question and I saw that you use the Isotope script, I would recommend changing your Javascript instead.

Try adding filter: '.selected' to your isotope call, like this:

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