0
4

1 に答える 1

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 (良い!)

ただし、さまざまな理由から、少し直感的ではありませんが、onclickプロパティを直接 html に追加するのではなく、javascript を使用してプロパティを設定することをお勧めします。より良い完全な動作例を次に示します。

<!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>
于 2012-09-05T05:27:09.630 に答える