Javascriptmenü + Inhalt ohne Frame

P

Play or Die

Grünschnabel
Tag Leute,

ich hab da eine Frage: Ist es möglich, dass wenn ich oben ein Javascript menü habe und unten dran direkt einen Text zum jeweiligen Button. Also zB sieht das menü folgendermassen aus

| Test 1 | Test 2 | Test 3 |


Und untendran den Text zum Button "Test 1". Wenn ich jetzt auf den Button "Test 2" klicke, soll der Text von Button "Test 1" verschwinden und der von "Test 2" erscheinen. Ich möchte aber nicht das dieser Inhalt per Frame geladen wird, sondern das ganze alles in einer Datei steht (also Menü + der Inhalt der einzelnen Buttons in einer Datei).

Ich hoffe ich habe einigermassen verständlich gemacht, was ich gerne hätte ^_°
 
Also ich hab hier das Menü:

Code: 
<style type="text/css">
.menu td{
    background:#184A6B;
    padding:1px;
}
.menu a{
    display:block;
    padding:2px;
    background:#184A6B;
    text-decoration:none;
    color:#ffffff;
    font:11px Verdana,Geneva,Sans-Serif;
    font-weight:bold;
    letter-spacing:1px;
    
}
.menu a:hover{
    background:#376586;
    color:#000000;
}
.sub a{
    background:#6999B8;
    font-weight:normal; 
    letter-spacing:0px;   
}
.menu{position:relative;top:0;left:0;}


</style>
<script type="text/javascript">
<!--    
    
    intXPadding = 0;
    intYPadding = -12;    
    intTimeout = 50;
    
    arrTimeouts = new Array();

     
      function get_sub(objMenu, intSub)
      {
            intTable =- 1;
            
            for(j = 0; j < objMenu.childNodes.length; ++j)
                {
                    intTable += (objMenu.childNodes[j].tagName=='TABLE') ? 1 : 0;
                    
                    if(intTable==intSub)
                        {
                            return(objMenu.childNodes[j]);
                        }  
                    arrTimeouts.push(false);
                }
        return false;
        }

       
          function menu(objElem, blnEvt)
          {
          
            //initalisieren de Menues beim ersten Aufruf
            if(arrTimeouts.length == 0)
                {
                    objElem.onmouseover = new Function('f','return false');
                    objMenu = objElem.parentNode;
                    blnType = (objElem.rows.length > 1) ? 1 : 0;
                    intItems=(blnType)? objElem.rows.length: objElem.rows[0].cells.length
                    
                    for(i = 0; i < intItems; ++i)
                        {   
                            objCell = (blnType)? objElem.rows[i].cells[0] : objElem.rows[0].cells[i];
                            objCell.onmouseover = new Function('f', 'menu('+i+', 1)');
                            objCell.onmouseout  = new Function('f',' menu('+i+', 0)');
                            objSub = get_sub(objMenu, i+1);
                            objSub.style.position = 'absolute';
                            objSub.style.left = (blnType)
                                                    ? (objCell.offsetLeft + (objMenu.offsetLeft - objSub.rows[0].cells[0].offsetLeft) + objCell.offsetWidth) + intXPadding
                                                    : (objCell.offsetLeft + (objSub.offsetLeft - objSub.rows[0].cells[0].offsetLeft)) + intXPadding;
                            
                            objSub.style.top  = (blnType)
                                                    ? objCell.offsetTop + (objMenu.offsetTop - objElem.rows[0].cells[0].offsetTop) + intYPadding
                                                    : objCell.offsetHeight + (objMenu.offsetTop + objElem.rows[0].cells[0].offsetTop)+ intYPadding;
                                       
                                                       
                            objSub.id = 'sub'+i;
                            objSub.width = 1;  //fixt opera-Macke mit Tabellenbreite
                            objSub.onclick = new Function('f', 'this.style.display = "none"');
                            objSub.onmouseover = new Function('f', 'menu('+i+', 1)');
                            objSub.onmouseout  = new Function('f', 'menu('+i+', 0)');
                            objSub.className = 'sub';
                        }
                    return;
                }
                
              //Zeigen
              if(blnEvt)
                    {
                        clearTimeout(arrTimeouts[objElem]);
                        document.getElementById('sub'+objElem).style.display = "";
                    }
              //Verstecken
              else
                    {
                        arrTimeouts[objElem] = setTimeout('document.getElementById("sub'+objElem+'").style.display="none"', intTimeout);
                    }
    
          }
//-->
</script>
<body>
 <div class="menu">
  <table width="95%" onmouseover="menu(this)">
	<tr>
	  <td width="20%"><a href="#">Finals</a></td>
	  <td width="20%"><a href="#">Counter-Strike</a></td>
	  <td width="20%"><a href="#">Live for Speed</a></td>
	  <td width="20%"><a href="#">Fifa 2004</a></td>
	  <td width="20%"><a href="#">Warcraft 3 - TFT</a></td>
	</tr>
  </table>
  <table style="display:none;">
	<tr><td><a href="#">Location</a></td></tr>
	<tr><td><a href="#">Bilder</a></td></tr>
	<tr><td><a href="#">Preisgelder</a></td></tr>
	<tr><td><a href="#">Zeitplan</a></td></tr>
  </table>
  <table style="display:none;">
	<tr><td><a href="#">Turnierbaum</a></td></tr>
	<tr><td><a href="#">Teamcheck</a></td></tr>
	<tr><td><a href="#">Tabelle</a></td></tr>
  </table>
  <table style="display:none;">
	<tr><td><a href="#">Tabelle</a></td></tr>
	</table>
  <table style="display:none;">
	<tr><td><a href="#">Turnierbaum</a></td></tr>
	<tr><td><a href="#">Teamcheck</a></td></tr>
	<tr><td><a href="#">Tabelle</a></td></tr>
  </table>
    <table style="display:none;">
	<tr><td><a href="#">Turnierbaum</a></td></tr>
	<tr><td><a href="#">Teamcheck</a></td></tr>
	<tr><td><a href="#">Tabelle</a></td></tr>
  </table>
 </div>

Ich will jetzt für jedes Untermenü nen Inhalt haben :(

//edit:

Ok, ich habe jetzt rausgefunden wie in ein Paar normale Texte switche. Aber ich muss ganze html codes switchen, und das kann ich leider damit nicht :(
 
Zuletzt bearbeitet:
Ich versteh was du sagen willst: du hast keine Ahnung von Javascript, aber erstens modele ich dir doch nicht ohne Bezahlung ein derartig langes Script um und zweitens ist mir jetzt wo ich das script sehe und deine ersten Beitrag lese nicht mehr so klar, was genau es eigentlich ist, was du willst.

Ich denke mal du willst, dass wenn man auf einen Menüpunkt klickt weiter unten auf der Seite dann ein anderer Inhalt erscheint. Wie wäre es wenn du einfach mal bei SELFHTML unter onclick, document.getElementById() und innerHTML nachschaust, denn genau das ist alles was du brauchst. Hau den Code in deine Links und sorge dafür, dass es ein Element mit der entsprechenden Id gibt und schau, was passiert.

Ansonsten, sollte ich dich nicht verstanden habe schreib bitte nochmal genau was du willst.
 
Zuletzt bearbeitet:
Das soll eine Coverage werden.

Eigentlich sollte ich jetzt auf Tabelle klicken können, und der Layer würde sich dementsprechend verändern. Tut er aber nicht, da der Layer ins Menü rutscht ^_°
 

Anhänge

  • 2.jpg
    2.jpg
    183,1 KB · Aufrufe: 50
Zuletzt bearbeitet:
con-f-use hat gesagt.:
du hast keine Ahnung von Javascript
Zum Vergrößern anklicken....

Nur weil ich das nicht kann, kann ich also gar nichts, verstehe :suspekt:

Ich weiss, dass ich die buttons mit ids belegen muss und das ich diese id inkl. inhalt angeben muss. Das ist nicht das Problem. Mein Problem ist es eher:

Inhalt (der htmlcode enthält) zu verändern.

//edit:

con-f-use hat gesagt.:
Ich denke mal du willst, dass wenn man auf einen Menüpunkt klickt weiter unten auf der Seite dann ein anderer Inhalt erscheint.
Zum Vergrößern anklicken....

Ja
 
Zuletzt bearbeitet:
Play or Die hat gesagt.:
Normale Inputbuttons oder anderes ist ja auch nicht so schwer. Mag sein, das es mit Menü gleich geht, aber anscheinend mache ich etwas falsch, und aus diesem grunde bin ich hier.
Zum Vergrößern anklicken....

Zeige doch mal, wie du es mit den Buttons machst...und im Vergleich dazu deine nicht funktionierende Variante...um den Fehler ausmachen zu können.
Im Prinzip hast du Recht..es ist dasselbe.
 
Code: 
<style type="text/css"> 
#nurfuerdich {position:absolute; left:150px; top:50px;} 
</style> 
<script language="JavaScript">
function wennihrmirnichtglaubt(txt) { 
    if(document.getElementById){ 
        document.getElementById('nurfuerdich').innerHTML = txt; 
	} 
} 
</script> 
<input style="font-weight: bold; width:50;" type='button' class='bb_button' value='Test1' onclick="wennihrmirnichtglaubt('Bitte sehr')">
<input style="font-weight: bold; width:60;" type='button' class='bb_button' value='Test2' onclick="wennihrmirnichtglaubt('-.-')">
<input style="font-weight: bold; width:70;" type='button' class='bb_button' value='Test3' onclick="wennihrmirnichtglaubt('?')">

<div id="nurfuerdich"> 
    Willkommen
</div>

Bitteschön.

Das Prob ist jetzt bei mir, das ich in diese ('bl4') keinen ganzen html reinkritzeln kann, da sonst das passiert wie das oben auf dem bild

//edit: ach sry, habe mich oben falsch ausgedrückt

//edit: Also nochmal zusammengefasst, was mein Prob ist:

Normalen Text, wenn er kein HTMLCode, enthält kann ich.
Text + HTMLCode kann ich nicht :(
 
Zuletzt bearbeitet:
und was genau hindert dich nun daran, bspw. per
Code: 
wennihrmirnichtglaubt('<table border="1"><tr><td>Hallo, Tabelle</td></tr></table>')
..HTML-Code in das <div> zu schreiben(bspw.eine Tabelle)

Schau dir mal dieses Thema an, ich vermute, dein Problem rührt von Zeilenumbrüchen und störenden Zeichen(SingleQuotes) her.... die Lösung ist dort zu finden:http://www.tutorials.de/tutorials197583.html
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück