Javascript Show Hide-將切換動作從復選框更改為<a href>鏈接</a>

Question

目前，我有一種顯示/隱藏基於下面的表單復選框字段的div的方法。 但是我想要的是不使用表單來顯示隱藏，而只是基於簡單的鏈接調用show / hide函數。 我希望這是合理的，我正在嘗試做。 任何幫助/建議都將非常有價值！

<!-- Show hide-->
<script language="JavaScript">
function showhidefield()
{
if (document.goform.areas.checked)
{
document.getElementById("areaone").style.display = "block";
document.getElementById("areatwo").style.display = "none";
}
else
{
document.getElementById("areaone").style.display = "none";
document.getElementById("areatwo").style.display = "block";

}
}
</script>

<form name="goform" id="goform" action="xxxx" method="post" enctype="multipart/form-data">

<label><input name="areas" type="checkbox" onclick="showhidefield()" value="1"> Yes </label>

</form>

<div id="areaone" style="display:none;">
Area One
</div><!-- / Hideable area -->


<div id="areatwo" style="display:block;">
Area two
</div>

更改上面的內容，以便不使用表單復選框進行顯示，而是根據事件產生切換效果，例如

<a href="xxx">Show Areaone / Hide Areatwo</a>

<a href="xxx">Show Areatwo / Hide Areaone</a>

Answer 1

一般的做法

通用方法是使用鏈接標記的onclick屬性。 您可以像這樣直接在標簽上設置：

<a onclick="showhidefield()" href="javascript:void(0);">Show/Hide</a>

例子1

這是一個完整的工作示例：

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <div id="areaone" style="display:none;">
      Area one
    </div>
    <div id="areatwo" style="display:block;">
      Area two
    </div>
    <script type='text/javascript'>
      function showOneHideTwo(){
          document.getElementById("areaone").style.display = "block";
          document.getElementById("areatwo").style.display = "none";
      }

      function showTwoHideOne(){
          document.getElementById("areaone").style.display = "none";
          document.getElementById("areatwo").style.display = "block";
      }      
    </script>
    <a onclick="showOneHideTwo()" href="javascript:void(0);">Show one / Hide two</a>
    <a onclick="showTwoHideOne()" href="javascript:void(0);">Show two / Hide one</a>
  </body>
</html>

示例2（更好！）

但是，由於種種原因，最好是使用javascript來設置onclick屬性，而不是直接將其添加到html中，如果不太直觀的話。 這是一個更好的完整工作示例：

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <div id="areaone" style="display:none;">
      Area one
    </div>
    <div id="areatwo" style="display:block;">
      Area two
    </div>
    <a id='showOneLink' href=''>Show one / Hide two</a>
    <a id='showTwoLink' href=''>Show two / Hide one</a>
    <script type='text/javascript'> <!-- This allows for better placement of the script as well... -->
      //Same functions as before
      function showOneHideTwo(){
          document.getElementById("areaone").style.display = "block";
          document.getElementById("areatwo").style.display = "none";
      }

      function showTwoHideOne(){
          document.getElementById("areaone").style.display = "none";
          document.getElementById("areatwo").style.display = "block";
      }

      //this time, we set the onclick here
      //this is better form- it keeps the content (html) and the scripting (javascript) seperate
      document.getElementById("showOneLink").onclick = function(){showOneHideTwo(); return false;}
      document.getElementById("showTwoLink").onclick = function(){showTwoHideOne(); return false;}
    </script> 
  </body>
</html>

Javascript Show Hide-將切換動作從復選框更改為<a href>鏈接</a>

問題描述

1 個解決方案

解決方案1
1 已采納 2012-09-05 05:27:09

一般的做法

例子1

示例2（更好！）

Javascript Show Hide-將切換動作從復選框更改為<a href>鏈接</a>

問題描述

1 個解決方案

解決方案1 1 已采納 2012-09-05 05:27:09

一般的做法

例子1

示例2（更好！）

解決方案1
1 已采納 2012-09-05 05:27:09