javascript - Cómo ocultar el contenido de otras pestañas y mostrar solo el contenido de la pestaña seleccionada

Cuando hago clic en una pestaña en particular, el contenido de las otras pestañas debería estar oculto, pero no se está ocultando. Este es todo el código que tengo.

function showStuff(id) {
  if (document.getElementById(id).style.display === "block") {
    document.getElementById(id).style.display = "none";
  } else {
    document.getElementById(id).style.display = "block";
  }
}

<ul class="side bar tabs">
  <li id="tabs1" onclick="showStuff('tabs-1')">City</li>
  <li id="tabs2" onclick="showStuff('tabs-2')">Country</li>
  <li id="tabs3" onclick="showStuff('tabs-3')">Humanity</li>
</ul>

<div id="tabs-1" style="display : none">
  <p>Proin elit m</p>
</div>
<div id="tabs-2" style="display : none">
  <p>M massa ut d</p>
</div>
<div id="tabs-3" style="display : none">
  <p> sodales.</p>
</div>

Respuesta #1

Dar a todos los elementos tab content una clase CSS común hace que seleccionarlos y estilizararlos sea mucho más fácil, por ejemplo en esta demostración y en el código a continuación.

CSS

.tabContent {
    display:none;
}

JavaScript

function showStuff(element)  {
    var tabContents = document.getElementsByClassName('tabContent');
    for (var i = 0; i < tabContents.length; i++) { 
        tabContents[i].style.display = 'none';
    }

    // change tabsX into tabs-X in order to find the correct tab content
    var tabContentIdToShow = element.id.replace(/(\d)/g, '-$1');
    document.getElementById(tabContentIdToShow).style.display = 'block';
}

HTML

<ul class="side bar tabs">
    <li id="tabs1" onclick="showStuff(this)">City</li>
    <li id="tabs2" onclick="showStuff(this)">Country</li>
    <li id="tabs3" onclick="showStuff(this)">Humanity</li>  
</ul>

<div id="tabs-1" class="tabContent">
    <p>Proin elit m</p>
</div>
<div id="tabs-2" class="tabContent">
    <p>M massa ut d</p>
</div>
<div id="tabs-3" class="tabContent">
    <p> sodales.</p>
</div>

También he actualizado la función showElement para que sea más genérica, de modo que haya menos duplicación de código al ocultar y mostrar el contenido de la pestaña correcta.

La única advertencia es que getElementsByClassName() no está disponible en IE8 o versiones anteriores. Otros navegadores (modernos) tienen esta función, pero hay alternativas: ver getElementsByClassName & IE8: El objeto no soporta esta propiedad o método.

Respuesta #2

Primero tienes que establecer un display: none para todo el contenido de tus pestañas.

p. ej.

<script type="text/javascript">
function showTab(selected, total)
{
  for(i = 1; i <= total; i += 1)
  {
    document.getElementById('tabs-' + i).style.display = 'none';
  }

  document.getElementById('tabs-' + selected).style.display = 'block';
}
</script>

<div id="tabs-1" style="display: none">tab1</div>
<div id="tabs-2" style="display: none">tab2</div>
<div id="tabs-3" style="display: none">tab3</div>

<ul class="side bar tabs">
  <li id = "tabs1" onclick = "showTab(1,3)">City</li>
  <li id = "tabs2" onclick = "showTab(2,3)">Country</li>
  <li id = "tabs3" onclick = "showTab(3,3)">Humanity</li>  
</ul>

Si hay algo así con tu código, estoy seguro de que va a funcionar. Por cierto, revisa tu ventana de Consola para errores de JavaScript.