Divs wechseln

Unregistriert

Hallo zusammen,

Könnt iht mir helfen? und zwar möchte ich per Link ein div ausblenden und dafür ein anderes einblenden lassen. an der selben stelle...Wie könnte ich das anstellen?

Danke schonmal im Vorraus!

Bandit

JavaScript ist dein Freund. Siehe z.B. http://www.cssnewbie.com/showhide-content-css-javascript/

Bleistift

#Bandit war schneller

Unregistriert

Aber das ist nicht genau das, was ich suche... Das zweite div soll genau an der selben stelle angezeigt werden, wie das erste! Und das erste soll verschwinden und das ganze sollte auch mit mehr als nur mit 2 divs funktionieren!!??

Bandit

Das kannst du alles mit der Funktion machen! Verstehe dein Problem deshalb nicht.

Unregistriert

<html>
<head>
<title></title>
<meta name="author" content="User">
<meta name="editor" content="html-editor phase 5">
<style type="text/css">
.content1 {
width: 200px;
height: 200px
position: absolute;
left: 20px; top: 20px;
border: 1px solid green; }

.content2 {
display: none;
width: 200px;
height: 200px
position: absolute;
left: 20px; top: 20px;
background-color: black; }

</style>
<script type="text/javascript">
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID+'-show').style.display != 'none') {
document.getElementById(shID+'-show').style.display = 'none';
document.getElementById(shID).style.display = 'block';
}
else {
document.getElementById(shID+'-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
}
</script>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<div id="example" class="content1"><p>...This is all visible content... </div>
<a href="#" class="links"
onclick="showHide('example');">Links.</a>
</p>
<div id="example" class="content2">
<p>...This content is hidden by default...</p>
</div>
<p><a href="#" class="rechts"
onclick="showHide('example');">Rechts</a></p>
</body>
</html>

Ich bin halt nicht so der java experte...Könnt ihr mir nicht dabei helfen? Wie bekommen ich das denn jetzt hin, dass mit Klick auf Links das andere div (content2) angezeigt wird?

threadi

Als erstes solltest Du dem Quellcode auch noch einen Doctype geben. Die ID "example" ist zudem doppelt vergeben - so kann kein JavaScript auf irgendein Element mit dieser ID zugreifen. Somit kann das was Du vor hast auch nicht funktionieren.

Also: korrigiere den HTML-Code.

Und du musst kein Java-Experte dafür sein. Das was Du suchst ist JavaScript - Himmelweiter Unterschied.

Und wenn Du Quellcode hier postest wäre es gut, wenn Du Code-Tags verwendest. Dann ist er deutlich lesbarer.

Unregistriert

Sorry, aber wie das mit den code-tags funktioniert habe ich nicht gescheckt!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta name="author" content="User">
<meta name="editor" content="html-editor phase 5">
<style type="text/css">
.content1 {
width: 200px;
height: 200px
position: absolute;
left: 20px; top: 20px;
border: 1px solid green; }

.content2 {
display: none;
width: 200px;
height: 200px
position: absolute;
left: 20px; top: 20px;
background-color: black; }

</style>
<script type="text/javascript">
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID+'-show').style.display != 'none') {
document.getElementById(shID+'-show').style.display = 'none';
document.getElementById(shID).style.display = 'block';
}
else {
document.getElementById(shID+'-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
}
</script>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<div id="erster" class="content1"><p>...This is all visible content... </div>
<a href="#" class="links"
onclick="showHide('example');">Links.</a>
</p>
<div id="zweiter" class="content2">
<p>...This content is hidden by default...</p>
</div>
<p><a href="#" class="rechts"
onclick="showHide('example');">Rechts</a></p>
</body>
</html>

Bandit

Also, ich behaupte mal, Copy/Paste kannst du, aber mal den Quellcode richtig durchzulesen und zu verstehen, kannst du nicht. Selbst wenn man kein Fachmann bzgl. JavaScript ist (bin ich auch nicht), so kann man doch aus dem Beispiel relativ gut erkennen, dass es dort ID's gibt, mit denen gearbeitet wird. und wenn man die ID's im HTML-Code ändert, muss man natürlich auch darauf achten, dass diese im JavaScript-Teil auch gefunden werden können. Auf SelfHTML kannst du mal nachsehen, was getElementById macht, vielleicht verstehst du dann, was ich meine.

Unregistriert

Also..Div ein/ausblenden is eig kein problem! aber wie bekomme ich es jetzt hin, dass das eine div verschwindet und GLEICHZEITIG das andere eingeblendet wird?

Bandit

Leute, Leute, nur mal logisch denken, dann sollte man darauf kommen!!

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL]http://www.w3.org/TR/html4/loose.dtd[/URL]">
 <html>
 <head>
 <title></title>
 <meta name="author" content="User">
 <meta name="editor" content="html-editor phase 5">
 <style type="text/css">
  .content1, .content2 {
    width: 200px;
    height: 200px;
    border: 1px solid green; 
 }
 
 .content2 {
    display: none;
 }
 </style>
 <script type="text/javascript">
 
  var visibleID = "erster";

  function showHide(showID) 
  {
    if (document.getElementById(showID)) 
    {
       document.getElementById(visibleID).style.display = 'none';
       visibleID = showID;
       document.getElementById(visibleID).style.display = 'block';
    }
 }
 </script>
 </head>
 <body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
 <div id="erster" class="content1">
   <p>ID="erster" </p>
   <a href="#" class="links" onclick="showHide('zweiter');">Links.</a>
 </div>
 <div id="zweiter" class="content2">
  <p>ID="zweiter"</p>
  <a href="#" class="rechts" onclick="showHide('erster');">Rechts.</a>
 </div>
 </body>
 </html>

Alles anzeigen

djheke

Hier mal ein CSS Experiment. Vielleicht hat jemand ja noch eine bessere Idee!?

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tabs mit CSS3 ein Experiment</title>
<style type="text/css">


* {
 margin:0;
 padding:0;
}




hr {
 padding:50px 0;
 visibility:hidden;
}




#tabcontainer {
 position:relative;
 background:#09c;
 color:#fff;
 width:300px;
 height:220px;
 margin-left:100px;
}




#tabcontainer a {
 float:left;
 width:100px;
 padding:4px 0;
 color:#fff;
 background:#000;
 text-decoration:none;
 text-align:center;
}


#tab1 , #tab2 , #tab3 {
 display:none;
}


#tabcontent1 , #tabcontent2 , #tabcontent3 {
 position:absolute;
 min-height: 190px;
 width:300px;
 left:-9999px;
 top:30px;
  background:#09c;
 }
 




#tab1:target ~ #tabcontent1  , #tab2:target ~ #tabcontent2  , #tab3:target ~ #tabcontent3  {
 left:0;
} 


#tab1:target ~ #tabanker1 , #tab2:target ~ #tabanker2 , #tab3:target ~ #tabanker3 {
 background:#09c;
}


h2 , p { padding:5px;} 


</style>


</head>
<body>


<hr><hr>


<div id="tabcontainer">
 <div>
  <span id="tab1"></span>
   <a href="#tab1" id="tabanker1" > Tab 1</a>
     <div id="tabcontent1">
      <h2>Tab 1</h2>
       <p>Inhalt von Tab 1</p>
     </div>
 </div>
 
 <div>
   <span id="tab2"></span>
   <a href="#tab2" id="tabanker2" > Tab 2</a>
     <div id="tabcontent2">
      <h2>Tab 2</h2>
      <p>Inhalt von Tab 2</p>
     </div>
 </div>
 
 <div>
   <span id="tab3"></span>
   <a href="#tab3" id="tabanker3" > Tab 3</a>
     <div id="tabcontent3">
      <h2>Tab 3</h2>
      <p>Inhalt von Tab 3</p>
     </div>
 </div> 




</div>


<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
</body>
</html>

Alles anzeigen

<hr> dient nur zum Beobachten, um zu zeigen, das die Seite nicht zum Viewport springt.
Funktioniert nicht im IE bis 8. Die per und 10er kann ich nicht testen. Also wer Lust hat kann ja mal gucken.

Beispielhttp://www.gipspferd.de/forumhilfe/tabs/