Fehldarstellung im Menü oder Fehler im Script?

[Loerbs]

Hallo,

Ich habe ein sehr komisches Problem.
Es geht um folgendes.

Ich bin derzeit dabei auf der Website http://www.manholdmedia.com/neu
mir eine neue Firmen-Homepage einzurichten.
Nun bin ich auf folgendes Problem gestoßen und komme einfach nicht weiter.





Habe euch eine Grafik erstellt damit Ihr wisst was ich meine.
Ich habe links eine weitere Menü auswahl:

• Unser Team
• Referenzen
• Joomla!
• html5 & css3

Beim Start der Seite wird aber leider der gesammte Inhalt alle Menü Punkte angezeigt. Wählt man dach aber ein Menü Punkt aus, so wird der Inhalt richitg dagestellt.

Meine Frage es nun, warum der gesammte Inhalt dagestellt wird und wie ich dieses unterbinden kann? Es soll legeltich nur der Inhalt von "Unser Team" dagestellt werden, wenn der Website aufgerufen wird.

    <!-- Our Work Section -->
        <div id="work" class="page">
            <div class="container">
                <!-- Title Page -->
                <div class="row">
                    <div class="span12">
                        <div class="title-page">
                            <h2 class="title">Webdesign</h2>
                        </div>
                    </div>
                </div>
               
                <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">Webdesign bei der ManholdMedia</li>
                                <li><a data-option-value=".team"  class="selected">Unser Team</a></li>
                                <li><a  data-option-value=".referenzen">Referenzen</a></li>
                                <li><a data-option-value=".joomla">Joomla!</a></li>
                                <li><a data-option-value=".html5">html5 & css3</a></li>
                            </ul>
                        </nav>
                        <!-- End Filter -->
                    </div>
                   
                    <div class="span9">
                        <div class="row">
                            <section id="projects">
                           
                           
                                <ul id="team">
                                    <li class="item-thumbs span3 team">
                                        <p>Unser Team - TEXT für unser Team<p/>
                                    </li>
                                </ul>
                               
                                <ul id="referenzen">
                                    <li class="item-thumbs span3 referenzen">
                                        <p>Unsere Referenzen - TEXT für Referenzen<p/>
                                    </li>
                                </ul>
                               
                                <ul id="joomla">
                                    <li class="item-thumbs span3 joomla">
                                        <p>Joomla... TEXT Bereich für Joomla!<p/>
                                    </li>
                                </ul>
                               
                                <ul id="html5">
                                    <li class="item-thumbs span3 html5">
                                        <p>html5 & css3<p/>
                                    </li>
                                </ul>

                            </section>
                           
                        </div>
                    </div>
                </div>
            </div>
        </div>

Habe euch auch ein Teil des JS rauskopiert, wo es irgenwo definiert sein muss, leider finde ich nur nichts..

/* ==================================================
  Navigation Fix
================================================== */

BRUSHED.nav = function(){
    $('.sticky-nav').waypoint('sticky');
}



/* ==================================================
  Filter Works
================================================== */

BRUSHED.filter = function (){
    if($('#projects').length > 0){       
        var $container = $('#projects');
       
        $container.imagesLoaded(function() {
            $container.isotope({
              // options
              animationEngine: 'best-available',
              itemSelector : '.item-thumbs',
              layoutMode : 'fitRows'
            });
        });
   
       
        // filter items when filter link is clicked
        var $optionSets = $('#options .option-set'),
            $optionLinks = $optionSets.find('a');
   
          $optionLinks.click(function(){
            var $this = $(this);
            // don't proceed if already selected
            if ( $this.hasClass('selected') ) {
              return false;
            }
            var $optionSet = $this.parents('.option-set');
            $optionSet.find('.selected').removeClass('selected');
            $this.addClass('selected');
     
            // make option object dynamically, i.e. { filter: '.my-filter-class' }
            var options = {},
                key = $optionSet.attr('data-option-key'),
                value = $this.attr('data-option-value');
            // parse 'false' as false boolean
            value = value === 'false' ? false : value;
            options[ key ] = value;
            if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
              // changes in layout modes need extra logic
              changeLayoutMode( $this, options )
            } else {
              // otherwise, apply new options
              $container.isotope( options );
            }
           
            return false;
        });
    }
}

Vieleicht habt Ihr eine Lösung für mich, die dieses Problem Löst.... Ich weiß mittlerweile nicht weiter, und kann es mir nicht erkären warum alles wiedergegben wird und wo dies ggf. im JS hinterlegt ist....
Habe es schon mit

$('#referenzen, #joomla, #html5').hide()

ausprobiert. Dan wird nur noch "team" geladen, aber leider auch nichts weiteres mehr... :/

Würde mich über eine Antwort total freuen.
Liebe Grüße
Alexander Lörbs

 

[Tronjer]

Ich weiß mittlerweile nicht weiter, und kann es mir nicht erkären warum alles wiedergegben wird und wo dies ggf. im JS hinterlegt ist....

Ich denke, du bietest Webdesign an? Dann solltest du doch zumindest die Grundlagen kennen. Wenn du dir die Seite mal im Firebug anschaust, wird die Opazität der Container abwechselnd auf 0 und 1 gesetzt. Das Problem liegt darin, dass im initialen Zustand alle Container sichtbar sind, und du willst nun temporär einige davon unsichtbar stellen.

Nachfolgend eine Ghetto-Lösung. Ich würde das so aber nicht übernehmen, sondern lieber das Plugin vernünftig anpassen.

//CSS
.hide_me {display: none};

// JavaScript
$('#referenzen, #joomla, #html5').addClass('hide_me');

$('#options li a').on('click', function() {
  $('#referenzen, #joomla, #html5').removeClass('hide_me');
});