gedit.net/

Artikel/

Elemente_anzeigen_und_verbergen_mit_Javascript

• Home
• | Artikel
• | Weblog
• | Sitemap
• | Impressum
• | Kontakt

Elemente anzeigen und verbergen mit Javascript

• Vorwort
• Funktionsweise
• Anzeigen, verbergen Funktionen
• Beispiele Elemente anzeigen, verbergen
• Alternative zu noscript Elementen
• Links und Quellen

Vorwort

Möchten Sie auf Ihrer Webseite HTML Elemente anzeigen oder verbergen ohne die Seite neu zu laden, dann werden die in diesem Artikel beschriebenen Javascript Funktionen Ihnen eine Möglichkeit aufzeigen.

Beim erstellen von Hypertext ist es von Vorteil dem Besucher die Wahl zu lassen ob er weitere Informationen zu einem Thema wünscht oder nicht.
Vermeiden Sie, dass Ihr Besucher von unwichtigen Informationen überflutet wird. Halten Sie die Struktur Ihrer Webseite übersichtlich und fassen Sie sich Kurz.

Zu diesem Zweck mit Vorschauen oder Teasern zu Arbeiten ist also nichts neues und wird oft praktiziert. Meist dienen diese Vorschauen als Hyperlink und leiten den Besucher auf Unterseiten weiter.
Mit Hilfe der folgenden Javascript Funktionen ist es möglich Inhalte die mit Ankern verknüpft sind ohne das Laden einer Unterseite anzuzeigen.
Was z. B. Hilfreich sein kann, wenn es sich nicht lohnt eine extra Unterseite zu erstellen. Im Fall, dass die Information kurz ist oder inhaltlich unmittelbar mit der Seite verflochten ist.

Ein weiteres Anwendungsbeispiel wären Ihren Besuchern interaktive Hilfestellung beim ausfüllen von Formularen zu geben. In Form von:

Kundennummer:
[?]

Sie finden Ihre Kundennummer auf der Rückseite Ihres Gerätes.
Ihre Kundennummer hat das Format: KNr.: 000-000-00

Beim klick auf das Fragezeichen findet Ihr Besucher dann z. B. Antworten auf Fragen wie: Wo finde ich meine Kundennummer? Oder wie sieht eigentlich die Kundennummer aus?
Probieren Sie es einfach selbst aus und klicken Sie einmal auf das Fragezeichen.

Gerade bei Formularen, da hier ein neu laden der Seite nicht möglich ist ohne ausgefüllte Inhalte zu löschen, ist diese Methode sehr effektiv und eine weitere Möglichkeit neben einem Pop-up.

Funktionsweise

Die betreffenden HTML Elemente werden über das CSS Element display verborgen bzw. angezeigt.

Über die Zuordnung einer eindeutigen ID bei den entsprechenden HTML Elementen, wird mit Hilfe von Javascript die CSS Direktive display: none; bzw. display: block; gesetzt. Was dann z. B. durch das Anklicken eines Hyperlinks ausgelöst werden kann mit dem entsprechenden Javascript Eventhandler.

Hierbei ist display: none; über die onload Funktion hide_class() auf betreffende Elemente default gesetzt. Um zu vermeiden das Besucher mit ausgeschalteten Javascript die Informationen nicht wahrnehmen können.

Anzeigen, Verbergen Funktionen

Die zwei Kernfunktionen hide_elements() und show_elements(), welche über die CSS ID Elemente verbergen bzw. anzeigen.

function show_elements()


// Elemente einblenden
// Mit show_elements() können einzelne oder mehrere Elemente
// via show_elements('ElementIDone','ElementIDtwo','ElementIDthree')
// eingeblendet werden.
function show_elements()
 {
  var elementNames = show_elements.arguments;
  for (var i=0; i<elementNames.length; i++)
   {
     var elementName = elementNames[i];
     document.getElementById(elementName).style.display='block';
   }
 }
// Elemente ausblenden
// Mit show_elements() können einzelne oder mehrere Elemente
// via hide_elements('ElementIDone','ElementIDtwo','ElementIDthree')
// ausgeblendet werden.
function hide_elements()
 {
  var elementNames = hide_elements.arguments;
  for (var i=0; i<elementNames.length; i++)
   {
     var elementName = elementNames[i];
     document.getElementById(elementName).style.display='none';
   }
 }

Sie sprechen die beiden Funktionen in Ihrem Template mit <a href="#Ankername" title="" onclick="show_elements('foo','bar');hide_elements('baz','yzzy')">Show foo, bar</a> an.

Beispiele Elemente Anzeigen, Verbergen

Im folgenden ein paar Beispiele mit Quelltext wie Sie die Beiden obigen Funktionen einsetzen können.

Siehe auch </archiv/dev/artikel/Elemente_anzeigen_und_verbergen_mit_Javascript/>.

Element verbergen

Einen Text verbergen

	<div id="text_html">
	<p>
		<a href="#" title="Verbergen" onclick="hide_elements('text_html');">Text verstecken</a>
	</p>
	<p>
		Text der bei einem klick auf Text verstecken ausgeblendet wird.
		...
	</p>
	</div>

Das <div> mit der ID text_html wird bei einem klick auf Text verbergen ausgeblendet.

Element anzeigen

Beispiel Link: Text anzeigen

Einen Text anzeigen

<p id="linkShow_xhtml">
		<a href="#"  title="Anzeigen" onclick="show_elements('text_xhtml');hide_elements('linkShow_xhtml')">Text anzeigen</a>
	</p>
	<div id="text_xhtml" class="noscript">
	<p>
		Text der bei einem klick auf Text anzeigen erscheint.
	</p>
	</div>

Das <div> mit der ID text_xhtml erscheint bei einem klick auf Text anzeigen. Währendem <p> mit der ID linkShow_xhtml ausgeblendet wird.

Element anzeigen/verbergen

Beispiel Link: Text anzeigen

Einen Text anzeigen/verbergen

	<p><strong><acronym title="Cascading Style Sheets">CSS</acronym></strong></p>
	<p id="linkShow_css">
		<a href="#" title="Anzeigen" onclick="show_elements('text_css');hide_elements('linkShow_css')">Show</a>
	</p>
	<div id="text_css" class="noscript">
		<p>
			Text der bei einem klick auf Show erscheint.
		</p>
		<p><a href="#" title="Verbergen" onclick="show_elements('linkShow_css');hide_elements('text_css')">Hide</a></p>
	</div>

Das vorher ausgeblendete <div> mit der ID text_css erscheint bei einem klick auf Text anzeigen. Während <p> mit der ID linkShow_css ausgeblendet wird. Der Text verbergen Link macht es rückgängig.

Element anzeigen

Javascript DOM ActiveX

Informationen zu einem ausgewählten Elemente anzeigen

	<div>
	<select name="select_list">
		<option value="Javascript" onclick="show_elements('select_javascript');hide_elements('select_activex','select_dom')">Javascript</option>
		<option value="DOM" onclick="show_elements('select_dom');hide_elements('select_activex','select_javascript')">DOM</option>
		<option value="AktivX" onclick="show_elements('select_activex');hide_elements('select_dom','select_javascript')">ActiveX</option>
	</select>
	</div>
	<div id="select_javascript" class="noscript">
		<strong>Javascript</strong>
		<blockquote cite="http://de.wikipedia.org/wiki/JavaScript">
		<p>
			...
		</p>
	</div>
	<div id="select_dom" class="noscript">
		<strong><acronym title="Document Object Model">DOM</acronym></strong>
		<p>
			...
		</p>
	</div>
	<div id="select_activex" class="noscript">
		<strong>ActiveX</strong>
		<p>
			...
		</p>
	</div>

Select Liste die bei einem klick auf das entsprechende Element die passende ID anzeigt und vorher ausgewählte Elemente ausblendet.

Elemente anzeigen

PHP
CGI
Perl

Informationen zu selektierten Elementen anzeigen

	<p>
		<input type="checkbox" name="text" value="PHP" onclick="show_elements('text_php')">PHP<br>
		<input type="checkbox" name="text" value="CGI" onclick="show_elements('text_cgi')">CGI<br>
		<input type="checkbox" name="text" value="Perl" onclick="show_elements('text_perl')">Perl
	</p>
	<div id="text_php" class="noscript">
	<strong><acronym title="Hypertext Preprocessor">PHP</acronym></strong>
	<p>
		...
	</p>
	</div>
	<div id="text_cgi" class="noscript">
	<strong>CGI</strong>
	<p>
		...
	</p>
	</div>
	<div id="text_perl" class="noscript">
	<strong>Perl</strong>
	<p>
		...
	</p>
	</div>

Checkbox die bei gesetztem Hacken das entsprechende <div> mit passender ID einblenden.

Alternative Eventhandler zu onclick wären z. B. onselect, onfocus, onmouseover etc.
Siehe dazu auch selfhtml.org - Javascript Eventhandler - <http://de.selfhtml.org/javascript/sprache/eventhandler.htm>.

Alternative zu noscript Elementen

Um Benutzer mit ausgeschalteten Javascript nicht auszuschließen, setzt Javascript beim Laden der Seite verborgene Elemente auf display: none;. Ist Javascript deaktiviert, werden diese Elemente angezeigt und sind für diese Benutzergruppe ebenfalls einsehbar.

function hide_class()

// Classes ausblenden
// Addiert zu alle CSS Classes jshide
// .noscript Classes werden dann via CSS
// mit .jshide.noscript { display: none; }
// ausgeblendet.
// Falls ein Besucher Javascript aushaben sollte, werden alle
// Elemente bzw. Classes angezeigt.
function hide_class()
 {
  document.documentElement.className += ' jshide';
 }

// Beim Seitenaufbau laden
window.onload = function()
 {
  hide_class();
  // andere window.onload Events
 }

Wie Sie sehen können fügt hide_class() allen Elementen den ClassName .jshide hinzu. Elemente die verborgen werden sollen besitzen bereits die class .noscript. Über den CSS Selector .jshide .noscript werden diese Elemente nun angesprochen und auf display: none; gesetzt.

Links und Quellen

• Beispielseite
  • </archiv/dev/artikel/Elemente_anzeigen_und_verbergen_mit_Javascript/>
  • </archiv/dev/artikel/Elemente_anzeigen_und_verbergen_mit_Javascript/index.html>
  • </archiv/dev/artikel/Elemente_anzeigen_und_verbergen_mit_Javascript/js/main.js>
• HTML
  • W3C - HTML Scripts - <http://www.w3.org/TR/REC-html40/interact/scripts.html>
  • W3C - HTML noscript Element - <http://www.w3.org/TR/REC-html40/interact/scripts.html>
• CSS
  • W3C - CSS 2.0 Selector - <http://www.w3.org/TR/CSS2/selector.html>
  • selfhtml.org - CSS display - <http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display>
• Javascript
  • selfhtml.org - Javascript einbinden - <http://de.selfhtml.org/javascript/intro.htm>
  • selfhtml.org - Javascript Eventhandler - <http://de.selfhtml.org/javascript/sprache/eventhandler.htm>

Kommentare

Ich finde das layout ok (andere haben mir zwar auch schon beessr gefallen aber egal), das einzige was mich stf6rt ist, wie ihr den blog zerstfcckelt habt. Bei anderen Festivalseiten (und auch in e4lteren oasg-versionen) war das irgendwie fcbersichtlicher und vor allem konnte in entsprechenden threads zum beispiel auch fcber bands spekuliert werden, was die vorfreude auf das festival an sich noch gesteigert hat. Richtet doch bitte so was wieder ein.

RIzaa, Samstag, 19. Mai 2012, 04:38

Echt super Tutorial!
Allerdings ein paar Fragen: Wohin mit den 2Funktionen show_elements() und hide_elements() ? Egal ob ich es in Php Tags, in HTml tags oder so mache, ständig kommen fehler!
MfG

test, Dienstag, 09. Oktober 2012, 22:34

Hallo, das hier ist ein Kommentar.Um Kommentare zu bearbeiten, musst du dich aneedlmn und zur dcbersicht der Artikel gehen. Dort bekommst du dann die Gelegenheit sie zu vere4ndern oder zu lf6schen.

Liazermaria, Freitag, 08. August 2014, 08:51

filho da puta

asasdsda, Mittwoch, 29. April 2015, 09:18

Hallo
Das Beispiel "Element anzeiten"
Informationen zu einem ausgewählten Elemente anzeigen
funktioniert nicht mit Google Chrome.
Welche Möglichkeit gibt es hier?

traum, Montag, 17. April 2017, 23:16

Hallo
Das Beispiel "Element anzeigen"
Informationen zu einem ausgewählten Elemente anzeigen
funktioniert nicht mit Google Chrome.
Welche Möglichkeit gibt es hier?

traum, Montag, 17. April 2017, 23:17

sdsdsd

sdsds, Samstag, 03. Juni 2017, 13:14

Test

Tester, Donnerstag, 16. November 2017, 15:53

Test

Tester, Donnerstag, 16. November 2017, 15:53

Test

Tester, Donnerstag, 16. November 2017, 15:57

Insgesammt 12 Kommentare

Seite 1 von 2

• Letzte Seite
• 1
• 2
• Nächste Seite

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

$req 17,5 KB - 0 Sec. - gedit.net/Artikel;Elemente_anzeigen_und_verbergen_mit_Javascript - Artikel - Elemente anzeigen und verbergen mit Javascript - 26.12.2023, 00:47:19 CET get $
No follow This is not the website of gedit the official text editor of the GNOME desktop environment.
Visit <http://www.gedit.org/> or <http://www.gnome.org/projects/gedit/> if you search the gnome-editor.
This work is licensed under a Creative Commons Attribution-NonCommercial 3.0 License. Valid HTML 4.1 Strict // Valid CSS 3.0 // Valid RSS // Valid Section 508 // Valid Level Double-A Conformance to Web Content Accessibility Guidelines 1.0.
$id Elemente anzeigen und verbergen mit Javascript - Gedit (HTML&_CSS Tutorials, Webgestaltung, Webentwicklung, Webdesign, Webdevelopment, Webstandards, Benutzerfreundlichkeit (Usability), Barrierefreiheit (Accessebility), Webfrontendentwicklung, Webbackendentwicklung, Visuelle Medien, Interfacedesign, Visuelle Kommunikation_ Grafikdesign_ Screendesign_ Typografie) v0.5 ©_ 2005&ndash_2023 Simon Gattner - 13.12.2011, 19:39 CET exp $