這篇文章主要介紹了JS實作點擊連結切換顯示隱藏內容的方法,涉及javascript滑鼠事件回應及頁面元素屬性動態變換相關操作技巧,需要的朋友可以參考下
本文實例講述了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中文網其他相關文章！
