como ago algo asi?

danistrein · #1 (**permalink**) 05/05/2009, 13:08

hola tengo una duda quiero hacer algo tipo esto miren aki les dejo el code:

Código HTML:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Tabbed Menu</title>

<SCRIPT language="JavaScript">
<!--
var panelID = "p1"
var numDiv = 2
var numRows = 1
var tabsPerRow = 4
var numLocations = numRows * tabsPerRow
var tabWidth = 90
var tabHeight = 30
var vOffset = 8
var hOffset = 10

var divLocation = new Array(numLocations)
var newLocation = new Array(numLocations)

for(var i=0; i<numLocations; ++i) {
      divLocation[i] = i
      newLocation[i] = i
}

function getDiv(s,i) {
      var div
      if (document.layers) {
            div = document.layers[panelID].layers[panelID+s+i]
      } else if (document.all && !document.getElementById) {
            div = document.all[panelID+s+i]
      } else {
            div = document.getElementById(panelID+s+i)
      }
      return div
}

function setZIndex(div, zIndex) {
      if (document.layers) div.style = div;
      div.style.zIndex = zIndex
}

function updatePosition(div, newPos) {
      newClip=tabHeight*(Math.floor(newPos/tabsPerRow)+1)
      if (document.layers) {
            div.style=div;
            div.clip.bottom=newClip; // clip off bottom
            } else {
            div.style.clip="rect(0 auto "+newClip+" 0)"
            }
      div.style.top = (numRows-(Math.floor(newPos/tabsPerRow) + 1)) * (tabHeight-vOffset)
      div.style.left = (newPos % tabsPerRow) * tabWidth +      (hOffset * (Math.floor(newPos / tabsPerRow)))
}

function selectTab(n) {
      // n is the ID of the division that was clicked
      // firstTab is the location of the first tab in the selected row
      var firstTab = Math.floor(divLocation[n] / tabsPerRow) * tabsPerRow
      // newLoc is its new location
      for(var i=0; i<numDiv; ++i) {
            // loc is the current location of the tab
            var loc = divLocation[i]
            // If in the selected row
            if(loc >= firstTab && loc < (firstTab + tabsPerRow)) newLocation[i] = (loc - firstTab)
            else if(loc < tabsPerRow) newLocation[i] = firstTab+(loc % tabsPerRow)
            else newLocation[i] = loc
      }
      // Set tab positions & zIndex
      // Update location
      for(var i=0; i<numDiv; ++i) {
            var loc = newLocation[i]
            var div = getDiv("panel",i)
            if(i == n) setZIndex(div, numLocations +1)
            else setZIndex(div, numLocations - loc)
            divLocation[i] = loc
            div = getDiv("tab",i)
            updatePosition(div, loc)
            if(i == n) setZIndex(div, numLocations +1)
            else setZIndex(div,numLocations - loc)
      }
}

// Nav4: position component into a table
function positionPanel() {
      document.p1.top=document.panelLocator.pageY;
      document.p1.left=document.panelLocator.pageX;
}
if (document.layers) window.onload=positionPanel;

//-->
</SCRIPT>
<STYLE type="text/css">
<!--
.tab {
      font-family: verdana ; font-size: 12px; cursor: hand; line-height:150%; font-weight: bold; position:absolute; text-align:center; border:2px; border-color:#999999; border-style:outset; border-bottom-style:none; width:90px; margin:0px; height: 30px;
}

.panel {
      font-family: verdana; font-size: 12px; position:absolute; border: 2px; border-color:#999999; border-style:outset; width: 400px; height: 300px; left:0px; top:28px; margin:0px; padding:6px;
}
-->
</STYLE>

</head>

<body>
<ILAYER id="panelLocator" width="400" height="330"></ILAYER>
<NOLAYER>
<DIV id="p1" style="background-color: transparent; position: relative; width: 400px; height: 330px">
<DIV id="p1panel0" class="panel" style="background-color: #ffffee;  z-index:2">
Panel 1
</DIV>
<DIV onclick="selectTab(0)" id="p1tab0" class="tab" style="background-color:#ffffee; left:0px; top:0px; z-index:2; clip:rect(0 auto 30 0)">
Sections</DIV>
<DIV id="p1panel1" class="panel" style="background-color: #ffffee;  z-index:1">
Panel 2
</DIV>
<DIV onclick="selectTab(1)" id="p1tab1" class="tab" style="background-color:#ffffee; left:90px; top:0px; z-index:1; clip:rect(0 auto 30 0)">
Questions
</DIV>
</DIV>
</NOLAYER></body>
</html>

quiero hacer lo mismo noma que este separado miren noce si me entienden por ej.:

mi web esta asi:

Código HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body onLoad="ini()" onload="actualizaReloj()">
<div id="fondo">
  <div id="contenido">
    <div id="logo"></div>
    <div id="menu" align="center">
      <ul class="lavaLampWithImage" id="1">
        <li><a href="#?Inicio">Inicio</a></li>
        <li><a href="#?Musica">Musica</a></li>
        <li><a href="#?Videos">Videos</a></li>
        <li><a href="#?Peliculas Online">Peliculas Online</a></li>
        <li><a href="#?Juegos PC">Juegos PC</a></li>
        <li><a href="#?Juegos PS2">Juegos PS2</a></li>
      </ul>
    </div>
    <div id="subcontenido">
      <div id="subcontenido-derecha" >Bienvenidos</div>
      <div id="subcontenido-izquierda">MenuSub1</div>
      <div id="subcontenido-izquierda">MenuSub2</div>
      <div id="subcontenido-izquierda">Publicidad</div>
    </div>
    <br />
  </div>
</div>
<div id="pie">
<div id="tiempoderecarga">
  <div align="center">Tiempo De Recarga: <span id="tmp">Cargando...</span>Segundos</div>
</div>
</div>
</body>
</html>

lo que quiero es poner en el DIV subcontenido-derecha el contenido que se va a mostrar
y arriba en el menu las opciones pero sin css y sin DIV solo quiero frace para que agan click y se cambie abajo

bueno espero que me ayuden

o aun mejor si tienen algo mas mejorado que eso les agradeceria que me lo pasaran

e visto en algunas paginas que ahy casi lo mismo noce como hacer pero se nota en la direcion que cambia ej. "index.php#parte1" - "index.php#parte2" "index.php#parte3" , pero al cambiar de secion desaparece la anterior

jaaja bueno espero que me entiendan y puedan ayudar

saludos Javascripteros