html，css，javascript - 显示/隐藏divs - 显示的一个应该隐藏另一个

Question

我想创建show / hide div。 这是我的代码：jsfiddle.net/b60b34h1

但它不能像我想的那样工作。 当按下“按下按钮2”时，我希望隐藏另一个div。 它应该只显示一个div。

你能帮帮我吗？ 感谢

Answer 1

你可以尝试这种方法

function unhide(divID) {
    var item = document.getElementById(divID);
    var openDiv = document.getElementsByClassName("unhidden");
    if(openDiv[0]!=undefined){
          openDiv[0].className = 'hidden';
    }

    if (item) {
      item.className='unhidden';
    }
  }

请找到工作代码段

＆＃13;

＆＃13;

function unhide(divID,currentLink) {
     var activeLink = document.getElementsByClassName("thick");
       if(activeLink[0]!=undefined){
          activeLink[0].className = 'btn btn-line-black';
    }
    var currentLink = document.getElementById(currentLink);
    currentLink.className = 'thick btn btn-line-black';
    var item = document.getElementById(divID);
    var openDiv = document.getElementsByClassName("unhidden");
    if(openDiv[0]!=undefined){
          openDiv[0].className = 'hidden';
    }
    if (item) {
      item.className=(item.className=='hidden')?'unhidden':'hidden';
    }
  }

＆＃13;

.hidden { display: none; }
.unhidden { display: block; }

.thick{
  font-weight: bold;
   color :red!important;
}

a:after{
font-weight: bold;
}

.btn{
  color :green;
}
.btn-line-black{
  border :1px solid green;
}

＆＃13;

<script type="text/javascript">
 
</script>

<div>
  <p><a id="link1" class="btn btn-line-black" href="javascript:unhide('button1','link1');">press button1</a> <a id="link2" class="btn btn-line-black" href="javascript:unhide('button2','link2');">press button2</a> <a id="link3" class="btn btn-line-black" href="javascript:unhide('button3','link3');">press button3</a></p>
  <div class="hidden" id="button1">
    <h3>button1</h3>
    <ul>
      <li>abc</li>
      <li>abc</li>
      <li>abc</li>
    </ul>
  </div>
<div class="hidden" id="button2">
    <h3>button2</h3>
    <ul>
      <li>abc</li>
      <li>abc</li>
      <li>abc</li>
    </ul>
  </div>
<div class="hidden" id="button3">
    <h3>button3</h3>
    <ul>
      <li>abc</li>
      <li>abc</li>
      <li>abc</li>
    </ul>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

所以你想要隐藏显示的div ...
然后显示对应于传递的id的div，对吗？

这可以这样写：

＆＃13;

＆＃13;

  function unhide(divID) {
    document.getElementsByClassName('unhidden')[0].className = "hidden";
    document.getElementById(divID).className = "unhidden";
  }

＆＃13;

.hidden { display: none; }
.unhidden { display: block; } 

＆＃13;

<div>
  <p><a href="javascript:unhide('button1');">press button1</a> <a href="javascript:unhide('button2');">press button2</a> <a href="javascript:unhide('button3');">press button3</a></p>
  <div class="unhidden" id="button1">
    <h3>button1</h3>
    <ul>
      <li>abc</li>
      <li>abc</li>
      <li>abc</li>
    </ul>
  </div>
<div class="hidden" id="button2">
    <h3>button2</h3>
    <ul>
      <li>abc</li>
      <li>abc</li>
      <li>abc</li>
    </ul>
  </div>
<div class="hidden" id="button3">
    <h3>button3</h3>
    <ul>
      <li>abc</li>
      <li>abc</li>
      <li>abc</li>
    </ul>
  </div>
</div> 

＆＃13;

＆＃13;

＆＃13;

Answer 3

function unhide(divID) {
    var item = document.getElementById('button' + divID);
    if (item) {
      item.className = 'unhidden';

      // hidden other divs
      for (var i = 1; i <= 3; i++) {
        if (i != divID) {
          document.getElementById('button' + i).className = 'hidden';
        }
      }

    }
  }

.hidden {
  display: none;
}

.unhidden {
  display: block;
}

<div>
  <p><a href="javascript:void(0);" onclick="unhide(1)">press button1</a> <a href="javascript:void(0);" onclick="unhide(2)">press button2</a> <a href="javascript:void(0);" onclick="unhide(3)">press button3</a></p>
  <div class="unhidden" id="button1">
    <h3>button1</h3>
    <ul>
      <li>abc</li>
      <li>abc</li>
      <li>abc</li>
    </ul>
  </div>
  <div class="hidden" id="button2">
    <h3>button2</h3>
    <ul>
      <li>abc</li>
      <li>abc</li>
      <li>abc</li>
    </ul>
  </div>
  <div class="hidden" id="button3">
    <h3>button3</h3>
    <ul>
      <li>abc</li>
      <li>abc</li>
      <li>abc</li>
    </ul>
  </div>
</div>