Mehere Container selektiv ansteuern

Jochen · 23. Dezember 2016

Ich habe 3 Container die ich über einen href individuell sichbar machen möchte,Ich kann mit dem beigefügten Code die einzenen Contasiner ansteuern.
Aber:

Wenn ich ZUERST auf Cont3 klicke, kann ich danach auch auf Cont2 klicken und danach auf Cont1 mit der entsprechenden Anzeige dann

Wenn ich jetzt auf Cont2 klicke, kann ich danach auch auf Cont1 klicken, klicke ich auf Cont3, damnn passiert nichts.

Wenn ich ZUERST auf Cont1 klicke, dann erscheint der entsprechende Container aber ein darauffogendes Anklicken von Cont2 oder Cont3 funktioniert nicht.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>2 container</title>
<meta name="author" content="chef">
<meta name="editor" content="html-editor phase 5">
</head>

<style>

* { margin:0px; padding:0px;}

html, body { height: 100%;}
body{ font-family: verdana;background: #F8F2E2;
background: linear-gradient(left, #F8F2E2 0%, #F7BE81 99%, #F7BE81 100%);
background: -webkit-linear-gradient(left, #F8F2E2 0%, #F7BE81 99%, #F7BE81 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#F8F2E2, endColorstr=#F7BE81,GradientType=1); }
#wrapper{ width: 1050px; height: 100%; margin: 0px auto;}
#platzhalter{ width:100%; height:150px; float:left;}

#sidebar .submenu{margin-top: 30px; width: 23% ; float: left; height: 100%;}
#sidebar .submenu li{ float: left; height: 60px;}
#sidebar .submenu li a{list-style-type:circle; text-decoration:none; font-size:16px; font-weight:400; text-align:left;
line-height:20px; color: black; display:block; float:left; width:250px;
}

#cont1 {
width: 75%;
float: left;
height: 100%;
color: black;
display:none;
}

#cont2 {
width: 75%;
float: left;
height: 100%;
color: black;
display:none;
}
#cont3 {
width: 75%;
float: left;
height: 100%;
color: black;
display:none;
}

</style> <body>

<div id="wrapper">
<div id="platzhalter"> Platzhalter für Header </div>

<section id="sidebar">

</ul>

</section>

</div>
</body>
</html>

Was ist zu tun?

Freundliche Grüße und ein frohes Fest

Jochen

Sempervivum · 23. Dezember 2016

Einfacher ist es, den Parameter bei der Definition der Funktion direkt anzugeben. Ich hoffe, dies ist das, was Du erreichen wolltest:

JavaScript

function show_elements(id) {                var conts = document.querySelectorAll("div[id^='cont']");
                for (var i = 0; i < conts.length; i++) {
                    if (conts[i].id == id) conts[i].style.display = "block";
                    else conts[i].style.display = "none";
                }             }

Und benutze in Zukunft Code-Tags. Das

JavaScript

[i]

wurde als BB-Code für "italic" interpretiert und verschluckt.

Jochen · 23. Dezember 2016

Da passiert gar nichts wenn ich die neue Funktion rein kopiere

Frage:

Was sind cod Tags und wie benutzt man die? Steht irgendwo wie man sie benutzt?

Gruß

Jochen

Jav · 23. Dezember 2016

Beim Beitrag erstellen oder beantworten gibt es diese schwarzen Buttons. Da mal drüber hovern, dann steht da, für was die sind. Text markieren und passenden Button klicken - fertig!

Zu deinem Script:
Du übergibst die Parameter, die aber von der Funktion garnicht erwartet werden.
Ich habe mal ein Testscript erstellt; weicht etwas von deinem ab, aber es geht ja um die Funktion:

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
#container{position:relative;}
.containers{position:absolute; left:100px; top:100px; width: 100px; height:100px; display:block; }
#cont1{background:red;}
#cont2{background:green;}
#cont3{background:blue;}
</style>
<script>
function show_element(ele)
{
 var ar = new Array('cont1', 'cont2', 'cont3' );
 var d=document.getElementById(ele);
 for (var i=0; i<ar.length; i++)
 {
  if(ar[i] != d.id)
  {
   document.getElementById(ar[i]).style.visibility='hidden';
  }
  else
  {
   document.getElementById(ar[i]).style.visibility='visible';
  }
 }
}
</script>
</head>




<body>




<div id="nav">
 <button onclick="show_element('cont1');">Zeige Container #1</button>
 <button onclick="show_element('cont2');">Zeige Container #2</button>
 <button onclick="show_element('cont3');">Zeige Container #3</button>
</div>




<div id="container">
 <div class="containers" id="cont1"></div>
 <div class="containers" id="cont2"></div>
 <div class="containers" id="cont3"></div>
</div>
</body>
</html>

Alles anzeigen

Sempervivum · 23. Dezember 2016

Zitat

Da passiert gar nichts wenn ich die neue Funktion rein kopiere

Verstehe ich nicht, ich habe es getestet, bevor ich es gepostet habe, mit deinem CSS und deinem HTML. Hast Du es irgend wo online?

Jochen · 23. Dezember 2016

Sehr schön. Es funktioniert und ich habe es auch verstanden.
Ich wünsche dir schöne Weihnachten und ein erfolgreiches neues Jahr.

Jochen

Jochen · 23. Dezember 2016

Hab wohl etwas falsch gemacht. Vielleicht bin ich durcheinander gekommen mit cont, conts usw. Ich muss auch zugeben ich habe die Idee verstanden aber die umsetzung verstanden in der Funktion zeile
var conts = document.querySelectorAll("div[id^='cont']");

da steht auf einmal cont während später conts gebraucht wird, ich selber auch cont in meinem code hatte.

Wenn du den Code noch hättest würde ich ihn gerne erhalten, da ich den Ansatz mit querySelectorAll interessant finde
und ich ihn sicher irgendwo noch einmal sinnvoll einsetzen kann.

Dir auch ein schönes Fest und ein tolles 2017

Jochen

Sempervivum · 24. Dezember 2016

Leider verschluckt das Forum einen Teil der Zeilenumbrüche. Hier noch Mal der Code ohne Code-Tags:
function show_elements(id) {
var conts = document.querySelectorAll("div[id^='cont']");
for (var i = 0; i < conts.length; i++) {
if (conts[i].id == id) conts[i].style.display = "block";
else conts[i].style.display = "none";
}
}
Das "^" in document.querySelectorAll("div[id^='cont']") gibt an, dass die ID mit "cont" beginnt,
d. h. dieser Selektor erkennt Übereinstimmung für "cont1", "cont2", "cont3" und ggf. weiter so.
In "var conts" ist conts nur ein Name, er ist mehr oder weniger beliebig und könnte genau so gut a oder x sein.
Aber es ist guter Stil, Variablennamen so festzulegen, dass zu erkennen ist, worum es sich handelt, daher habe ich conts gewählt.
Diese Lösung hat den Vorteil, dass man nur das HTML zu erweitern braucht, wenn man neue Container hinzufügt und nichts
am Javascript ändern muss.

Dir gleichfalls frohe Weihnachten und ein gutes 2017!

Jochen · 24. Dezember 2016

funktioniert jetzt. toll. danke

Mehere Container selektiv ansteuern

Jetzt mitmachen!

Teilen