Question

一次只能打开1个分区的html / css / js脚本

这个脚本完美无缺！我花了好几天寻找更专业的代码后把它放在一起 - 它不需要任何资源文件这么简单 - 但它的丑陋代码。如何在不添加jsQuery的情况下使用单个函数缩短它。关闭所有div，然后识别单击以打开它。当然可以用一个功能完成。

      <!DOCTYPE html>
      <html>
        <head>
          <style>  div { width:100%; height:100px; text-align: center; display: none; }  </style>
        </head>
        <body>
          <center>
            <nobr>
              <button onclick="hs1()"> Content div1 
              </button> &nbsp;&nbsp; 
              <button onclick="hs2()"> Content div2 
              </button> &nbsp;&nbsp; 
              <button onclick="hs3()"> Content div3 
              </button> &nbsp;&nbsp; 
              <button onclick="hs4()"> Content div4 
              </button> &nbsp;&nbsp; 
              <button onclick="hs5()"> Content div5 
              </button>
            </nobr>
          </center>
          <hr>
          <center>
            <nobr>
              <a href="#!" id="" onclick="return hs1()"> Content div1 </a> | 
              <a href="#!" id="" onclick="return hs2()"> Content div2 </a> | 
              <a href="#!" id="" onclick="return hs3()"> Content div3 </a> | 
              <a href="#!" id="" onclick="return hs4()"> Content div4 </a> | 
              <a href="#!" id="" onclick="return hs5()"> Content div5 </a>
            </nobr>
          </center>
          <hr>
          <div id="div1" style="background-color:#ff00ff; display:block;">DIV element 1.  
          </div>
          <div id="div2" style="background-color:#ff0000;">DIV element 2. 
          </div>
          <div id="div3" style="background-color:#cccccc;">DIV element 3. 
          </div>
          <div id="div4" style="background-color:#ffff00;">DIV element 4. 
          </div>
          <div id="div5" style="background-color:#0000ff;">DIV element 5. 
          </div>
      <script>
      function hs1()
      {
      document.getElementById("div1").style.display = "block";
      document.getElementById("div2").style.display = "none";
      document.getElementById("div3").style.display = "none";
      document.getElementById("div4").style.display = "none";
      document.getElementById("div5").style.display = "none";
      }
      function hs2()
      {
      document.getElementById("div1").style.display = "none";
      document.getElementById("div2").style.display = "block";
      document.getElementById("div3").style.display = "none";
      document.getElementById("div4").style.display = "none";
      document.getElementById("div5").style.display = "none";
      }
      function hs3()
      {
      document.getElementById("div1").style.display = "none";
      document.getElementById("div2").style.display = "none";
      document.getElementById("div3").style.display = "block";
      document.getElementById("div4").style.display = "none";
      document.getElementById("div5").style.display = "none";
      }
      function hs4()
      {
      document.getElementById("div1").style.display = "none";
      document.getElementById("div2").style.display = "none";
      document.getElementById("div3").style.display = "none";
      document.getElementById("div4").style.display = "block";
      document.getElementById("div5").style.display = "none";
      }
      function hs5()
      {
      document.getElementById("div1").style.display = "none";
      document.getElementById("div2").style.display = "none";
      document.getElementById("div3").style.display = "none";
      document.getElementById("div4").style.display = "none";
      document.getElementById("div5").style.display = "block";
      }
      </script>
        </body>
      </html>

Answer 1

这个怎么样？演示：http://jsfiddle.net/naokiota/frnDq/4/

HTML：

<a href="#" onclick="return hs(1)"> Content div1 </a> | 
<a href="#" onclick="return hs(2)"> Content div2 </a> | 
<a href="#" onclick="return hs(3)"> Content div3 </a> | 
<a href="#" onclick="return hs(4)"> Content div4 </a> | 
<a href="#" onclick="return hs(5)"> Content div5 </a>

JavaScript的：

 function hs(divno){
    for(var i = 1 ; i <=5 ; i++){
        var display = (i == divno) ? "block":"none";
        document.getElementById("div"+i).style.display = display;
    }
    return false;
  }

Answer 2

你可以这样写函数：

function hs(openPanel)
{
    for (var x = 1; x <= 5; ++x)
    {
        document.getElementById("div" + x).style.display = ((x == openPanel) ? "block" : "none");
    }
}

这应该与您已编写的代码完全相同，只是没有重复。它现在需要一个参数来指示您要显示的面板，因此您可以调用hs2()而不是调用hs(2)。

Answer 3

感谢@Naota＆amp; @JoeFarrell 你的答案帮了很多忙。我改编自你发布的内容，并选择了以下内容 - 仅仅因为在我的理解阶段，我可以自己关注它，而不是因为它更好。我将可见div的显示放在单独的括号中，因此它没有运行5次。如果有什么明显的错误请告诉我。

 <script>
 function hs(divno){
     for(var i = 1 ; i <=5 ; i++){
         document.getElementById("div"+i).style.display = "none";
     }
     {
         document.getElementById("div"+divno).style.display = "block";
     }
         return false;
 }
 </script>

链接;

    <a href="#!" onclick="return hs(1)"> Content div1 </a> | 
    <a href="#!" onclick="return hs(2)"> Content div2 </a> | 
    <a href="#!" onclick="return hs(3)"> Content div3 </a> | 
    <a href="#!" onclick="return hs(4)"> Content div4 </a> | 
    <a href="#!" onclick="return hs(5)"> Content div5 </a>

史蒂夫

在网页上一次只能打开1个分区的脚本

3 个答案: