• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Anzeigen nur des aktuellen Menüpunktes

B

blackpickupline

Neues Mitglied
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: 
<!DOCTYPE html>
<html>

<head>
    <title>Test</title>
    

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript">

var sse1 = function () {
    var rebound = 20; //set it to 0 if rebound effect is not prefered
    var slip, k;
    return {
        buildMenu: function () {
            var m = document.getElementById('sses1');
            if(!m) return;
            var ul = m.getElementsByTagName("ul")[0];
            m.style.width = ul.offsetWidth+1+"px";
            var items = m.getElementsByTagName("li");
            var a = m.getElementsByTagName("a");

            slip = document.createElement("li");
            slip.className = "highlight";
            ul.appendChild(slip);

            var url = document.location.href.toLowerCase();
            k = -1;
            var nLength = -1;
            for (var i = 0; i < a.length; i++) {
                if (url.indexOf(a[i].href.toLowerCase()) != -1 && a[i].href.length > nLength) {
                    k = i;
                    nLength = a[i].href.length;
                }
            }

            if (k == -1 && /:\/\/(?:www\.)?[^.\/]+?\.[^.\/]+\/?$/.test) {
                for (var i = 0; i < a.length; i++) {
                    if (a[i].getAttribute("maptopuredomain") == "true") {
                        k = i;
                        break;
                    }
                }
                if (k == -1 && a[0].getAttribute("maptopuredomain") != "false")
                    k = 0;
            }

            if (k > -1) {
                slip.style.width = items[k].offsetWidth + "px";
                //slip.style.left = items[k].offsetLeft + "px";
                sse1.move(items[k]); //comment out this line and uncomment the line above to disable initial animation
            }
            else {
                slip.style.visibility = "hidden";
            }

            for (var i = 0; i < items.length - 1; i++) {
                items[i].onmouseover = function () {
                    if (k == -1) slip.style.visibility = "visible";
                    if (this.offsetLeft != slip.offsetLeft) {
                        sse1.move(this);
                    }
                }
            }

            m.onmouseover = function () {
                if (slip.t2)
                    slip.t2 = clearTimeout(slip.t2);
            };

            m.onmouseout = function () {
                if (k > -1 && items[k].offsetLeft != slip.offsetLeft) {
                    slip.t2 = setTimeout(function () { sse1.move(items[k]); }, 50);
                }
                if (k == -1) slip.t2 = setTimeout(function () { slip.style.visibility = "hidden"; }, 50);
            };
        },
        move: function (target) {
            clearInterval(slip.timer);
            var direction = (slip.offsetLeft < target.offsetLeft) ? 1 : -1;
            slip.timer = setInterval(function () { sse1.mv(target, direction); }, 15);
        },
        mv: function (target, direction) {
            if (direction == 1) {
                if (slip.offsetLeft - rebound < target.offsetLeft)
                    this.changePosition(target, 1);
                else {
                    clearInterval(slip.timer);
                    slip.timer = setInterval(function () {
                        sse1.recoil(target, 1);
                    }, 15);
                }
            }
            else {
                if (slip.offsetLeft + rebound > target.offsetLeft)
                    this.changePosition(target, -1);
                else {
                    clearInterval(slip.timer);
                    slip.timer = setInterval(function () {
                        sse1.recoil(target, -1);
                    }, 15);
                }
            }
            this.changeWidth(target);
        },
        recoil: function (target, direction) {
            if (direction == -1) {
                if (slip.offsetLeft > target.offsetLeft) {
                    slip.style.left = target.offsetLeft + "px";
                    clearInterval(slip.timer);
                }
                else slip.style.left = slip.offsetLeft + 2 + "px";
            }
            else {
                if (slip.offsetLeft < target.offsetLeft) {
                    slip.style.left = target.offsetLeft + "px";
                    clearInterval(slip.timer);
                }
                else slip.style.left = slip.offsetLeft - 2 + "px";
            }
        },
        changePosition: function (target, direction) {
            if (direction == 1) {
                //following +1 will fix the IE8 bug of x+1=x, we force it to x+2
                slip.style.left = slip.offsetLeft + Math.ceil(Math.abs(target.offsetLeft - slip.offsetLeft + rebound) / 10) + 1 + "px";
            }
            else {
                //following -1 will fix the Opera bug of x-1=x, we force it to x-2
                slip.style.left = slip.offsetLeft - Math.ceil(Math.abs(slip.offsetLeft - target.offsetLeft + rebound) / 10) - 1 + "px";
            }
        },
        changeWidth: function (target) {
            if (slip.offsetWidth != target.offsetWidth) {
                var diff = slip.offsetWidth - target.offsetWidth;
                if (Math.abs(diff) < 4) slip.style.width = target.offsetWidth + "px";
                else slip.style.width = slip.offsetWidth - Math.round(diff / 3) + "px";
            }
        }
    };
} ();

if (window.addEventListener) {
    window.addEventListener("load", sse1.buildMenu, false);
}
else if (window.attachEvent) {
    window.attachEvent("onload", sse1.buildMenu);
}
else {
    window["onload"] = sse1.buildMenu;
}

</script>


</head>

<body>

<style type="text/css">

.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;
}

</style>

<div class="display">

<div id="sse1">
    <div id="sses1">
    <ul>
        <li style="margin-right: 10px; margin-bottom: 10px;"><a href="?menu=1&skin=2&p=tab-1"><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>
        
        <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>


    
        <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>

</div>    <!-- Ende display -->

</body>
</html>
 
Werbung:
blackpickupline schrieb:
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?
Code: 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
Zum Vergrößern anklicken....
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
 
Spicelab schrieb:
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
Zum Vergrößern anklicken....

Voll stark, danke dir! :) :)
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben