この記事では主に、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 はコンテンツを表示するためのクリックサイクル切り替えを実装します
Angular はスケジュール機能を実装します(表示コンテンツの追加と非表示が可能) 詳細説明
JSのクリックサイクル切り替えを実装してコンテンツを表示する方法
以上がJS リンクをクリックして非表示コンテンツの表示に切り替えますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
