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

A script that only opens 1 division at a time on a web page

本文关键字：一个 分区 脚本 上一次 网页      更新时间：2023-09-26

一个html/css/js脚本，每次只打开一个分区

这个脚本工作完美!在花了几天时间寻找更专业的代码之后，我把它放在了一起——它不需要任何资源文件——它很简单——但它的代码很丑。我如何缩短它与一个单一的功能，而不必添加jquery。关闭所有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>

这个怎么样
DEMO: 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;
  }

你可以这样写这个函数:

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

应该和你已经写过的代码做同样的事情，只是没有重复。它现在接受一个参数，指示您想要显示的面板，因此您将调用hs(2)而不是调用hs2()。

感谢@Naota &@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>
史蒂夫

相关文章：