リンクをクリックしたときに非表示のコンテンツを表示するように切り替えるJSを実装する方法-jsチュートリアル-php.cn

リンクをクリックしたときに非表示のコンテンツを表示するように切り替えるJSを実装する方法

黄舟

リリース： 2017-10-19 10:46:46

オリジナル

2239 人が閲覧しました

この記事では主に、JavaScript のマウスイベント応答やページ要素属性の動的変換など、非表示のコンテンツを表示するための JS の実装方法を紹介します。必要な方は参考にしてください。

この記事の例。は、非表示のコンテンツを表示するクリックリンク切り替えメソッドの JS 実装について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

まずランニング効果を見てみましょう:

具体的なコードは次のとおりです:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>www.jb51.net 点击链接切换显示隐藏内容</title>
 <style>
  a {
   cursor: pointer;
   color: red;
  }
  #p1, #p2 {
   display: none;
  }
 </style>
</head>
<body>
 <a onclick="con(1)">显示内容1</a>
 <a onclick="con(2)">显示内容2</a>
 <p id="p1">11111</p>
 <p id="p2">22222</p>
 <script>
  flag = "p1";
  function con(i){ //参数传递时传递字符串似乎有问题，这里采用的是数字传参
   document.getElementById(flag).style.display = "none";
   document.getElementById("p" + i).style.display = "inline";
   flag = "p" + i;
  }
 </script>
</body>
</html>

ログイン後にコピー

以上がリンクをクリックしたときに非表示のコンテンツを表示するように切り替えるJSを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。