ホームページ >ウェブフロントエンド >jsチュートリアル >リンクをクリックしたときに非表示のコンテンツを表示するように切り替えるJSを実装する方法
リンクをクリックしたときに非表示のコンテンツを表示するように切り替えるJSを実装する方法
- 黄舟オリジナル
- 2017-10-19 10:46:462331ブラウズ
この記事では主に、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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。