0

Tengo una lista desplegable, es un menu, y tengo un javascript que los oculta y los muestra los div, pero al seleccionar una opcion que esta dentro de otro en la lista desplegable no muestra los demas, dejo el codigo aqui para que entiendan mas. Y si se puede acortar un poco el codigo tambien me ayudaria mucho, gracias.

function cambiar(boton) {
var inicioCont = document.getElementsByTagName('inicio');
    var infoCont = document.getElementById('info');
        var armadoCont = document.getElementById('armado');
        var excelCont = document.getElementById('excel');
        var netbeansCont = document.getElementById('netbeans');
        var websCont = document.getElementById('webs');
        var notepadCont = document.getElementById('notepad');
        var sublimeCont = document.getElementById('sublime');
        var dreamCont = document.getElementById('dreamweaver');
  var noticiasCont = document.getElementById('noticias');
    var salidasCont = document.getElementById('salidas');
    var talleresCont = document.getElementById('talleres');
    var practicaCont = document.getElementById('practica');

    
 switch(boton) {
 case 1:

          inicioCont.style.display = 'block';
          infoCont.style.display = 'none';
          armadoCont.style.display = 'none';
          excelCont.style.display = 'none';
          netbeansCont.style.display = 'none';
          websCont.style.display = 'none';
          notepadCont.style.display = 'none';
          sublimeCont.style.display = 'none';
          dreamCont.style.display = 'none';
          noticiasCont.style.display = 'none';
          salidasCont.style.display = 'none';
          talleresCont.style.display = 'none';
          practicaCont.style.display = 'none';
break;
 case 2:

          inicioCont.style.display = 'none';
          infoCont.style.display = 'block';
          armadoCont.style.display = 'none';
          excelCont.style.display = 'none';
          netbeansCont.style.display = 'none';
          websCont.style.display = 'none';
          notepadCont.style.display = 'none';
          sublimeCont.style.display = 'none';
          dreamCont.style.display = 'none';
          noticiasCont.style.display = 'none';
          salidasCont.style.display = 'none';
          talleresCont.style.display = 'none';
          practicaCont.style.display = 'none';
break;
 case 3:

          inicioCont.style.display = 'none';
          infoCont.style.display = 'none';
          armadoCont.style.display = 'block';
          excelCont.style.display = 'none';
          netbeansCont.style.display = 'none';
          websCont.style.display = 'none';
          notepadCont.style.display = 'none';
          sublimeCont.style.display = 'none';
          dreamCont.style.display = 'none';
          noticiasCont.style.display = 'none';
          salidasCont.style.display = 'none';
          talleresCont.style.display = 'none';
          practicaCont.style.display = 'none';
break;
 case 4:

          inicioCont.style.display = 'none';
          infoCont.style.display = 'none';
          armadoCont.style.display = 'none';
          excelCont.style.display = 'block';
          netbeansCont.style.display = 'none';
          websCont.style.display = 'none';
          notepadCont.style.display = 'none';
          sublimeCont.style.display = 'none';
          dreamCont.style.display = 'none';
          noticiasCont.style.display = 'none';
          salidasCont.style.display = 'none';
          talleresCont.style.display = 'none';
          practicaCont.style.display = 'none';
break;
 case 5:

          inicioCont.style.display = 'none';
          infoCont.style.display = 'none';
          armadoCont.style.display = 'none';
          excelCont.style.display = 'none';
          netbeansCont.style.display = 'block';
          websCont.style.display = 'none';
          notepadCont.style.display = 'none';
          sublimeCont.style.display = 'none';
          dreamCont.style.display = 'none';
          noticiasCont.style.display = 'none';
          salidasCont.style.display = 'none';
          talleresCont.style.display = 'none';
          practicaCont.style.display = 'none';
break;
 case 6:

          inicioCont.style.display = 'none';
          infoCont.style.display = 'none';
          armadoCont.style.display = 'none';
          excelCont.style.display = 'none';
          netbeansCont.style.display = 'none';
          websCont.style.display = 'block';
          notepadCont.style.display = 'none';
          sublimeCont.style.display = 'none';
          dreamCont.style.display = 'none';
          noticiasCont.style.display = 'none';
          salidasCont.style.display = 'none';
          talleresCont.style.display = 'none';
          practicaCont.style.display = 'none';
break;
 case 7:

          inicioCont.style.display = 'none';
          infoCont.style.display = 'none';
          armadoCont.style.display = 'none';
          excelCont.style.display = 'none';
          netbeansCont.style.display = 'none';
          websCont.style.display = 'none';
          notepadCont.style.display = 'block';
          sublimeCont.style.display = 'none';
          dreamCont.style.display = 'none';
          noticiasCont.style.display = 'none';
          salidasCont.style.display = 'none';
          talleresCont.style.display = 'none';
          practicaCont.style.display = 'none';
break;
 case 8:

          inicioCont.style.display = 'none';
          infoCont.style.display = 'none';
          armadoCont.style.display = 'none';
          excelCont.style.display = 'none';
          netbeansCont.style.display = 'none';
          websCont.style.display = 'none';
          notepadCont.style.display = 'none';
          sublimeCont.style.display = 'block';
          dreamCont.style.display = 'none';
          noticiasCont.style.display = 'none';
          salidasCont.style.display = 'none';
          talleresCont.style.display = 'none';
          practicaCont.style.display = 'none';
          aulaCont.style.display = 'none';
break;
 case 9:

          inicioCont.style.display = 'none';
          infoCont.style.display = 'none';
          armadoCont.style.display = 'none';
          excelCont.style.display = 'none';
          netbeansCont.style.display = 'none';
          websCont.style.display = 'none';
          notepadCont.style.display = 'none';
          sublimeCont.style.display = 'none';
          dreamCont.style.display = 'block';
          noticiasCont.style.display = 'none';
          salidasCont.style.display = 'none';
          talleresCont.style.display = 'none';
          practicaCont.style.display = 'none';
break;
 case 10:

          inicioCont.style.display = 'none';
          infoCont.style.display = 'none';
          armadoCont.style.display = 'none';
          excelCont.style.display = 'none';
          netbeansCont.style.display = 'none';
          websCont.style.display = 'none';
          notepadCont.style.display = 'none';
          sublimeCont.style.display = 'none';
          dreamCont.style.display = 'none';
          noticiasCont.style.display = 'block';
          salidasCont.style.display = 'none';
          talleresCont.style.display = 'none';
          practicaCont.style.display = 'none';
break;
 case 11:

          inicioCont.style.display = 'none';
          infoCont.style.display = 'none';
          armadoCont.style.display = 'none';
          excelCont.style.display = 'none';
          netbeansCont.style.display = 'none';
          websCont.style.display = 'none';
          notepadCont.style.display = 'none';
          sublimeCont.style.display = 'none';
          dreamCont.style.display = 'none';
          noticiasCont.style.display = 'none';
          salidasCont.style.display = 'block';
          talleresCont.style.display = 'none';
          practicaCont.style.display = 'none';
break;
 case 12:

          inicioCont.style.display = 'none';
          infoCont.style.display = 'none';
          armadoCont.style.display = 'none';
          excelCont.style.display = 'none';
          netbeansCont.style.display = 'none';
          websCont.style.display = 'none';
          notepadCont.style.display = 'none';
          sublimeCont.style.display = 'none';
          dreamCont.style.display = 'none';
          noticiasCont.style.display = 'none';
          salidasCont.style.display = 'none';
          talleresCont.style.display = 'block';
          practicaCont.style.display = 'none';
break;
 case 13:
          inicioCont.style.display = 'none';
          infoCont.style.display = 'none';
          armadoCont.style.display = 'none';
          excelCont.style.display = 'none';
          netbeansCont.style.display = 'none';
          websCont.style.display = 'none';
          notepadCont.style.display = 'none';
          sublimeCont.style.display = 'none';
          dreamCont.style.display = 'none';
          noticiasCont.style.display = 'none';
          salidasCont.style.display = 'none';
          talleresCont.style.display = 'none';
          practicaCont.style.display = 'block';
break;
 }
}
*{
    margin:0px;
    padding:0px;
}

#cabecera {
    margin:auto;
    font-family:Arial;
}
ul, ol{
	list-style:none;
}
.nav img{
	width:100%;
	height:100%;
	max-width: 120px;
	max-height:50px;
}
.nav{	
	display:flex;
	justify-content: center;
	background-color:black;
	overflow:hidden;
}
.nav > li{
	float:left;
}
.nav li a:hover{
    background-color: gray;
}

.nav li a{
    padding:10px;
	color:#fff;
	display:flex;
	text-decoration:none;
	margin-left:10px;
}
.nav li ul li a{
	padding:10px;
}
.nav li ul{
	display:none;
	background-color:black;
	position:absolute;
	min-width:140px;
}

.nav li:hover > ul{
	display:block;
}

.nav li ul li{
	position: relative;
}
.nav li ul li ul{
	right:-140px;
	top:0px;
}

#inicio{
    display:none;
}

#info{
    display:none;  
}
#armado{
    display:none;  
}
#excel{
    display:none;  
}
#netbeans{
    display:none;  
}
#webs{
    display:none;  
}
#notepad{
    display:none;  
}
#sublime{
    display:none;  
}
#dreamweaver{
    display:none;  
}
#noticias{
    display:none;  
}
#salidas{
    display:none;  
}
#talleres{
    display:none;  
}
#practica{
    display:none;  
}
<html>
<head>
<link rel="stylesheet" href="menu.css">
</head>
<body>
<div id="cabecera">
    <script src="javascript.js"></script>
			<ul class="nav">
				<li onClick="cambiar(1)"><a href="#">Inicio</a></li>
				<li onClick="cambiar(2)"><a href="#">Informacion</a>
					<ul>
						<li onClick="cambiar(3)"><a href="#">Armado de PC</a></li>
						<li onClick="cambiar(4)"><a href="#">Excel</a></li>
						<li onClick="cambiar(5)"><a href="#">NetBeans</a></li>
						<li onClick="cambiar(6)"><a href="#">Creacion de Paginas WEB</a>
							<ul>
								<li onClick="cambiar(7)"><a href="#">Notpad++</a></li>
								<li onClick="cambiar(8)"><a href="#">Sublime Text</a></li>
								<li onClick="cambiar(9)"><a href="#">Dreamweaber</a></li>
								
							</ul>
						</li>
					</ul>
				</li>
                
				<li onClick="cambiar(10)"><a href="#">Noticias</a>
					<ul>
						<li onClick="cambiar(11)"><a href="#">Salida a Terreno</a></li>
						<li onClick="cambiar(12)"><a href="#">Talleres en DOUC UC</a></li>
						<li onClick="cambiar(13)"><a href="#">Practica</a></li>
					</ul>
				</li>
				<li><a href="" target="blank">Aula Virtual</a></li>
			</ul>
    <div id="inicio">
<p>Aqui va el contenido1</p>
</div>
<div id="info">
<p>Aqui va el contenido2</p>
</div>
<div id="armado">
<p>Aqui va el contenido3</p>
</div>
<div id="excel">
<p>Aqui va el contenido4</p>
</div>
<div id="netbeans">
<p>Aqui va el contenido5</p>
</div>
<div id="webs">
<p>Aqui va el contenido6</p>
</div>
<div id="notepad">
<p>Aqui va el contenido7</p>
</div>
<div id="sublime">
<p>Aqui va el contenido8</p>
</div>
<div id="dreamweaver">
<p>Aqui va el contenido9</p>
</div>
<div id="noticias">
<p>Aqui va el contenido10</p>
</div>
<div id="salidas">
<p>Aqui va el contenido11</p>
</div>
<div id="talleres">
<p>Aqui va el contenido12</p>
</div>
<div id="practica">
<p>Aqui va el contenido13</p>
</div>
    
</div>
</body>
</html>

2

2 respuestas 2

0

El primer error que encontre es este: document.getElementsByTagName('inicio'); debe ser document.getElementsById('inicio');

lo segundo es que los elementos los tienes asi:

      <li onClick="cambiar(2)"><a href="#">Informacion</a>
        <ul>
          <li onClick="cambiar(3)"><a href="#">Armado de PC</a></li>
          <li onClick="cambiar(4)"><a href="#">Excel</a></li>
          <li onClick="cambiar(5)"><a href="#">NetBeans</a></li>
          <li onClick="cambiar(6)"><a href="#">Creacion de Paginas WEB</a>
            <ul>
              <li onClick="cambiar(7)"><a href="#">Notpad++</a></li>
              <li onClick="cambiar(8)"><a href="#">Sublime Text</a></li>
              <li onClick="cambiar(9)"><a href="#">Dreamweaber</a></li>

            </ul>
          </li>
        </ul>
      </li>

siempre al dar click en alguno de los hijos digamos en este caso Armado de pc por estar dentro de información se va a ejecutar la función cambiar(2) por lo que veo (pero no se si es obligatorio tener) ver la posibilidad de eliminar la función de las listas padres y solo dejarlos en los hijos, como te dejo en el ejemplo al cual le agregue unas mejoras para que el código se vea mas simple

function cambiar(boton) {
  document.querySelectorAll('.contenedor').forEach((contenedor) => {
    contenedor.style.display = 'none'; //esconde todos lso elementos
  })
  switch (boton) {
    case 1:
      document.getElementById('inicio').style.display = 'block';
      break;
    case 2:
      document.getElementById('info').style.display = 'block';
      break;
    case 3:
      document.getElementById('armado').style.display = 'block';
      break;
    case 4:
      document.getElementById('excel').style.display = 'block';
      break;
    case 5:
      document.getElementById('netbeans').style.display = 'block';
      break;
    case 6:
      document.getElementById('webs').style.display = 'block';
      break;
    case 7:
      document.getElementById('notepad').style.display = 'block';
      break;
    case 8:
      document.getElementById('sublime').style.display = 'block';
      break;
    case 9:
      document.getElementById('dreamweaver').style.display = 'block';
      break;
    case 10:
      document.getElementById('noticias').style.display = 'block';
      break;
    case 11:
      document.getElementById('salidas').style.display = 'block';
      break;
    case 12:
      document.getElementById('talleres').style.display = 'block';
      break;
    case 13:
      document.getElementById('practica').style.display = 'block';
      break;
  }
}
* {
  margin: 0px;
  padding: 0px;
}

#cabecera {
  margin: auto;
  font-family: Arial;
}

ul,
ol {
  list-style: none;
}

.nav img {
  width: 100%;
  height: 100%;
  max-width: 120px;
  max-height: 50px;
}

.nav {
  display: flex;
  justify-content: center;
  background-color: black;
  overflow: hidden;
}

.nav>li {
  float: left;
}

.nav li a:hover {
  background-color: gray;
}

.nav li a {
  padding: 10px;
  color: #fff;
  display: flex;
  text-decoration: none;
  margin-left: 10px;
}

.nav li ul li a {
  padding: 10px;
}

.nav li ul {
  display: none;
  background-color: black;
  position: absolute;
  min-width: 140px;
}

.nav li:hover>ul {
  display: block;
}

.nav li ul li {
  position: relative;
}

.nav li ul li ul {
  right: -140px;
  top: 0px;
}

#inicio {
  display: none;
}

#info {
  display: none;
}

#armado {
  display: none;
}

#excel {
  display: none;
}

#netbeans {
  display: none;
}

#webs {
  display: none;
}

#notepad {
  display: none;
}

#sublime {
  display: none;
}

#dreamweaver {
  display: none;
}

#noticias {
  display: none;
}

#salidas {
  display: none;
}

#talleres {
  display: none;
}

#practica {
  display: none;
}
<html>

<head>
  <link rel="stylesheet" href="menu.css">
</head>

<body>
  <div id="cabecera">
    <script src="javascript.js"></script>
    <ul class="nav">
      <li onClick="cambiar(1)"><a href="#">Inicio</a></li>
      <li><a href="#">Informacion</a>
        <ul>
          <li onClick="cambiar(3)"><a href="#">Armado de PC</a></li>
          <li onClick="cambiar(4)"><a href="#">Excel</a></li>
          <li onClick="cambiar(5)"><a href="#">NetBeans</a></li>
          <li><a href="#">Creacion de Paginas WEB</a>
            <ul>
              <li onClick="cambiar(7)"><a href="#">Notpad++</a></li>
              <li onClick="cambiar(8)"><a href="#">Sublime Text</a></li>
              <li onClick="cambiar(9)"><a href="#">Dreamweaber</a></li>

            </ul>
          </li>
        </ul>
      </li>

      <li><a href="#">Noticias</a>
        <ul>
          <li onClick="cambiar(11)"><a href="#">Salida a Terreno</a></li>
          <li onClick="cambiar(12)"><a href="#">Talleres en DOUC UC</a></li>
          <li onClick="cambiar(13)"><a href="#">Practica</a></li>
        </ul>
      </li>
      <li><a href="" target="blank">Aula Virtual</a></li>
    </ul>
    <div id="inicio" class="contenedor">
      <p>Aqui va el contenido1</p>
    </div>
    <div id="info" class="contenedor">
      <p>Aqui va el contenido2</p>
    </div>
    <div id="armado" class="contenedor">
      <p>Aqui va el contenido3</p>
    </div>
    <div id="excel" class="contenedor">
      <p>Aqui va el contenido4</p>
    </div>
    <div id="netbeans" class="contenedor">
      <p>Aqui va el contenido5</p>
    </div>
    <div id="webs" class="contenedor">
      <p>Aqui va el contenido6</p>
    </div>
    <div id="notepad" class="contenedor">
      <p>Aqui va el contenido7</p>
    </div>
    <div id="sublime" class="contenedor">
      <p>Aqui va el contenido8</p>
    </div>
    <div id="dreamweaver" class="contenedor">
      <p>Aqui va el contenido9</p>
    </div>
    <div id="noticias" class="contenedor">
      <p>Aqui va el contenido10</p>
    </div>
    <div id="salidas" class="contenedor">
      <p>Aqui va el contenido11</p>
    </div>
    <div id="talleres" class="contenedor">
      <p>Aqui va el contenido12</p>
    </div>
    <div id="practica" class="contenedor">
      <p>Aqui va el contenido13</p>
    </div>

  </div>
</body>

</html>

0

       <script 
      src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
      </script>
     <link rel="stylesheet"  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <script>
    
    function cambiar(boton) {
      accion=boton
      if(accion==1){
        $('#inicio').show()
         $('#info').hide()
    }else if (accion==2){
       $('#info').show()
       $('#inicio').hide()
    }
    }
    
    </script>

Hazlo con jQuery agrega esto en tu script y funcionara, solo agrega en cada if todos los que quieres ocultas o mostrar

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.