이 글은 자바스크립트 마우스 이벤트 응답과 페이지 요소 속성의 동적 변환을 포함하여 링크를 클릭하여 숨겨진 콘텐츠를 표시하도록 전환하는 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>관련 권장 사항:
Angular는 일정 기능을 구현합니다. (디스플레이 콘텐츠 추가 및 숨기기 가능) 자세한 설명
위 내용은 JS 링크를 클릭하여 숨겨진 콘텐츠 표시로 전환의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
