Javascript Show Hide-将切换操作从复选框更改为<a href>链接

Javascript Show Hide - Changing toggle action from Checkbox to <a href> links

本文关键字：lt 链接 gt href Hide- Show 复选框 操作 Javascript      更新时间：2023-09-26

目前我有一种基于表单复选框字段显示/隐藏div的方法，如下所示。然而，我想要的是不要使用表单来显示隐藏，而只是基于简单的链接调用显示/隐藏函数。我希望这对我的努力有意义。任何帮助/建议都将受到重视！

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

通用方法

一般的方法是使用链接标签的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>
相关文章：