Wie kann man eine Spanne angezeigt, auf Klick, aber verschwinden, wenn ein anderer link angeklickt wird?
Ich bin ganz neu in javascript also bitte Geduld mit mir. Ich werde versuchen, einen Bereich zu erscheinen, auf klicken, die ich erreicht habe, aber ich brauche Sie, um zurückzukehren, zu versteckt, wenn ein anderer link angeklickt wird. Dies ist, was ich habe, so weit.
<html>
<head>
<style>
aside.apps{
position:relative;
}
span.socialApp{
visibility:hidden;
position:absolute;
top:20px;
left: 0;
background-color:#e9e9e9;
}
</style>
<script>
var state = 'hidden';
function showApp(a) {
if (state == 'visible') {
state = 'hidden';
}
else {
state = 'visible';
}
if (document.getElementById && !document.all) {
x = document.getElementById(a);
x.style.visibility = state;
}
}
</script>
</head>
<body>
<aside class="apps">
<a href="javascript://" onclick="showApp('app1');">link1</a>
<span class="socialApp" id="app1">stuff goes here1</span>
<a href="javascript://" onclick="showApp('app2');">link2</a>
<span class="socialApp" id="app2">stuff goes here2</span>
<a href="javascript://" onclick="showApp('app3');">link3</a>
<span class="socialApp" id="app3">stuff goes here3</span>
<a href="javascript://" onclick="showApp('app4');">link4</a>
<span class="socialApp" id="app4">stuff goes here4</span>
</aside>
</body>
</html>
Derzeit bei link1 geklickt wird app1 erscheint, dann einmal link2 geklickt wird, app2, erscheint über der Oberseite von link1. Wenn link2 ist dann geschlossen link1 ist noch sichtbar. Ich brauche, um zu überprüfen, alle 4 und alle versteckt, außer der aktuellen Auswahl.
- Willkommen ALSO! Große erste Frage, aber Sie finden noch mehr Menschen, die wollen, zu beantworten, wenn Sie sicherstellen, dass der Einzug ist dein code richtig, so dass es leichter zu Lesen.
Du musst angemeldet sein, um einen Kommentar abzugeben.
und herzlich willkommen auf Stack Overflow!
First off, werde ich schlage vor, Sie nutzen jQuery helfen Sie mit Ihr JavaScript. jQuery (und andere ähnliche frameworks wie Zepto, MooTools und Dojo) Bügeleisen über einige der Risse in JavaScript wie cross-browser-Inkonsistenzen und machen vieles leichter. Zu zählen jQuery in Ihr Projekt, Sie müssen nur fügen Sie den folgenden in deine Seite
<head>
tag:Nun haben Sie Zugriff auf jQuery können Sie entfernen Sie alle
onclick
Attribute, die Sie Hinzugefügt, um Ihre<a>
- tags. Die Verwendung vononclick
tags ist entmutigt, als Sie geht zurück zu den Anfängen der web-Entwicklung vor dem DOM Level 1-standard war (fast) vereinbart. Stattdessen ist es empfohlen, Sie binden an das 'klicken' Ereignis - dies wird helfen, halten Sie Ihre HTML-und JavaScript getrennt und wiederum machen Sie Ihre JavaScript-leichter zu Lesen und zu Debuggen.jQuery macht es wirklich einfach zu binden eine Prozedur (Funktion), um ein click-Ereignis, die Sie gerade brauchen, um verwenden Sie die
on
syntax:jQuery bietet auch eine schnelle und einfache Möglichkeit zum anzeigen und ausblenden von Elementen auf der Seite über
show
undausblenden
, hier wie es funktioniert:Die einzige Sache zu beachten hier ist, dass, wenn Sie 'ausblenden' ein element mit jQuery ist es tatsächlich setzt die
display
CSS-Attribut des Elements. In deinem code oben, Sie waren versteckt Elemente, durch wechseln dervisibility
Attribut.Den letzten Teil der Antwort liegt darin, wie wir das aktuell sichtbare element; dies kann erreicht werden durch das hinzufügen einer neuen variable, die verfolgt, welches element angezeigt wird, kann man sehen, das in meinen geänderten code unten.
Wenn Sie daran interessiert sind zu erfahren Sie mehr über die Entwicklung von JavaScript dann kann schlage ich die Lektüre Objektorientierung JavaScript, die bietet eine ausgezeichnete Einführung in die Sprache und einige Macken.
Leichte update, die Funktion ist jetzt eigenständig.
Diese arbeiten sollten, wie Sie wollen; es ziehen, bis die richtige Spannweite, und verstecken Sie es wieder, wenn es wieder geklickt.
Hier ist der code nochmal:
state2
eine lokale variable, da Sie nie seinen Wert über die Anrufung dershowApp
.Empfehle ich die Verwendung von JQuery. Es hat cross-browser-Unterstützung und ermöglicht eine einfache Arbeit der Dinge wie diese ;).
gehören die folgenden in Ihren tags
Hier ist das neue Skript
ändern Sie Ihre html diese
ändern Sie Ihre css zu dieser
JSFiddle Beispiel: http://jsfiddle.net/peterf/u2SFL/
Sollten Sie behalten, die derzeit sichtbar-Element in eine variable (die zunächst
null
).Jedes mal
showApp
genannt wird, blenden Sie die aktuell sichtbare Element.Dann stellen Sie die Spanne, die gerade geklickt wurde sichtbar, und denken Sie daran, dass es nun das aktuell sichtbare Element (es sei denn, der hat nur geklickt wurde, ist das gleiche, das wurde sichtbar, bis jetzt - in diesem Fall sollten Sie nicht machen nichts sichtbar und es ist nicht mehr die gerade sichtbaren Element).
Mein schlechtes, bearbeitet die Antwort, es würde Ihnen helfen. Ich glaube nicht, es gibt keine Notwendigkeit, um eine variable zu verwenden. Blenden Sie einfach alle überspannt und dann zeigen die, die Sie als variable übergeben.
Update:
Als Sie sind mit javascript, nur nicht Tauchen Sie ein in jQuery, da es einfacher für jemand anderes, und Sie werden werfen Sie einen code, Wann immer Sie Fragen.
Mir nicht, aber alle großen javascript-Entwickler empfehlen Ihnen, zu lernen, javascript lernen, bevor seine Rahmenbedingungen.
Auch, jQuery ist es auf einfache Dinge, um einfach nur den code zu trennen markup und javascript.
Sollten Sie nicht jetzt aber wenn Sie bereit sind, versuchen Sie später, sollten Sie sich an einen Ansatz wie dieses. (Keine onclick-in-markup und ein einfacher code)
visibility
werden "sichtbar" und alle, die überspannt wird, sichtbar gemacht werden. Da app4 ist der Letzte, es erscheint auf der Oberseite des anderen. Mit einerstate
variable für mehrere Bereiche funktioniert einfach nicht.