I need help with Javascript, css and HTML, Hide and Show DIV's

Navigation
0

I have a drop-down list, it's a menu, and I have a javascript that hides them and shows them the div, but when selecting an option that is inside another one in the drop-down list does not show the others, I leave the code here so that understand more. And if you can shorten the code a bit, it would also help me a lot, thank you. 

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>
    
asked by Gabriel Cortes 28.05.2018 в 20:12
source

2 answers

0

The first error I found is this: document.getElementsByTagName('inicio'); must be document.getElementsById('inicio');

The second thing is that the elements are like this: 

      <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>

always when clicking on any of the children, let's say in this case Armed pc because it is inside information, the function to change (2) will be executed by what I see (but I do not know if it is obligatory to have) to see the possibility of eliminating the function of the parent lists and only leaving them in the children, as I leave you in the example to which I added some improvements to make the code look simpler 

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>
    
answered by 28.05.2018 в 22:16
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>

Do it with jQuery add this in your script and it will work, just add in each if all you want hidden or show

    
answered by 28.05.2018 в 22:17
How to fix cucumber.runtime.CucumberException: java.lang.NoSuchMethodException Data that is lost from the Oracle Database