5

特定のタブをクリックすると、他のタブのコンテンツが非表示になるはずですが、非表示になっていません。これが私が持っているすべてのコードです。

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>

4

5 に答える 5

0

display: noneまず、すべてのタブ コンテンツに対してa を設定する必要があります。

例えば

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

あなたのコードにこのようなものがあれば、うまくいくと確信しています。ところで、コンソール ウィンドウで JavaScript エラーを確認してください。

于 2013-05-09T07:48:10.273 に答える