ホームページ >ウェブフロントエンド >jsチュートリアル >JS リンクをクリックして非表示コンテンツの表示に切り替えます

JS リンクをクリックして非表示コンテンツの表示に切り替えます

小云云オリジナル: 2018-01-09 13:05:102388ブラウズ

この記事では主に、JavaScript のマウスイベント応答とページ要素属性の動的変換を含む、リンクをクリックして非表示のコンテンツの表示に切り替える JS メソッドを紹介します。必要な方は参考にしていただければ幸いです。

最初に実行効果を見てみましょう:

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

<!DOCTYPE html> 
<html> 
<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 リンクをクリックして非表示コンテンツの表示に切り替えます

関連記事