Anzeigen nur des aktuellen Menüpunktes

blackpickupline · 21. Dezember 2016 um 15:14

Hallo liebe Community,

ich bin nicht besonders erfahren und wende mich daher hilfesuchend an euch Wissende

Ich hätte gerne auf der folgenden Seite, dass nur der Inhalt des aktuell ausgewählten Menüpunktes erscheint und die anderen beiden ausgeblendet werden - ohne dass dazu eine neue Seite geöffnet werden muss. Gleichzeitig soll der Rote Slider an der Stelle des aktuellen Menüpunktes bleiben.

Ist das irgendwie möglich? Ich wäre euch wirklich sehr sehr dankbar.

Liebe Grüße
blackpickupline

[CODE]

Test .display { margin: 0px 0px 0px 0px; width: 1070px; min-height: 1500px; font-family: arial; font-size: 11pt; } #sses1 ul { position: relative; list-style-type: none; float:left; padding:0; border-bottom:solid 1px #E40045; } #sses1 li { float:left; list-style-type: none; } #sses1 li.highlight { background-color:#E40045; margin-top:221px; height:2px; border-bottom:solid 1px #E40045; z-index: 1; position: absolute; } #sses1 li a { color: #E40045; position: relative; z-index: 2; }

    <li style="margin-right: 10px; margin-bottom: 10px;"><a href="?menu=1&skin=2&p=tab-2"><img src="https://placeholdit.imgix.net/~text?txtsize=26&bg=58839e&txtclr=ffffff%26text%3Dbrand%2520blue&txt=Brand+Blue&w=350&h=210"
                            onmouseover="this.src='https://placeholdit.imgix.net/~text?txtsize=26&bg=58839e&txtclr=ffffff%26text%3Dbrand%2520blue&txt=Brand+Blue&w=350&h=210'"
                            onmouseout="this.src='https://placeholdit.imgix.net/~text?txtsize=26&bg=58839e&txtclr=ffffff%26text%3Dbrand%2520blue&txt=Brand+Blue&w=350&h=210'"/></a>
    
    
    </a></li>
    
    <li style="margin-bottom: 10px;"><a href="?menu=1&skin=2&p=tab-3"><img src="https://placeholdit.imgix.net/~text?txtsize=26&bg=58839e&txtclr=ffffff%26text%3Dbrand%2520blue&txt=Brand+Blue&w=350&h=210"
                            onmouseover="this.src='https://placeholdit.imgix.net/~text?txtsize=26&bg=58839e&txtclr=ffffff%26text%3Dbrand%2520blue&txt=Brand+Blue&w=350&h=210'"
                            onmouseout="this.src='https://placeholdit.imgix.net/~text?txtsize=26&bg=58839e&txtclr=ffffff%26text%3Dbrand%2520blue&txt=Brand+Blue&w=350&h=210'"/>
    
    </a></li>
</ul>
</div>

    <div id="tab-1">
        <p>    Inhalt1</p>
        
    </div>
    
    
    <div id="tab-2">
        <p>Inhalt 2</p>
    
    </div>
    
    
    <div id="tab-3">
        <p>    Inhalt3</p>
    </div>

[/CODE]

SpiceLab · 21. Dezember 2016 um 15:35

blackpickupline:

Ich hätte gerne auf der folgenden Seite, dass nur der Inhalt des aktuell ausgewählten Menüpunktes erscheint und die anderen beiden ausgeblendet werden - ohne dass dazu eine neue Seite geöffnet werden muss.

Ist das irgendwie möglich?
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>

Sowas gibt’s gebrauchsfertig für das in Zeile 8 eingebundene Framework jQuery: https://jqueryui.com/tabs/ - um eine der frei verfügbaren jQuery-Anwendungen genannt zu haben.

Weitere kannst Du Dir via https://www.google.de/search?q=jquery+tab+menu anschauen, vergleichen, auswählen.

Und hier etwas mit nativem JavaScript (ohne jQuery, JS-Framework), wie in Zeile 11 bis 150 Deines präsentierten Codes, der technisch nicht mehr auf der Höhe der Zeit ist: http://www.w3schools.com/howto/howto_js_tabs.asp

Auch hier gilt… das ist nicht das Ende der Fahnenstange: https://www.google.de/search?q=js+tab+menu

blackpickupline · 21. Dezember 2016 um 17:05

Voll stark, danke dir!