집 > 기사 > 웹 프론트엔드 > JS 링크를 클릭하여 숨겨진 콘텐츠 표시로 전환

JS 링크를 클릭하여 숨겨진 콘텐츠 표시로 전환

小云云원래의: 2018-01-09 13:05:102362검색

이 글은 자바스크립트 마우스 이벤트 응답과 페이지 요소 속성의 동적 변환을 포함하여 링크를 클릭하여 숨겨진 콘텐츠를 표시하도록 전환하는 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 링크를 클릭하여 숨겨진 콘텐츠 표시로 전환

관련 기사