html페이지에서 id갑을 체크하여 출력 할려합니다

html페이지에서 id갑을 체크하여 출력 할려합니다

QA

html페이지에서 id갑을 체크하여 출력 할려합니다

본문

html페이지에서 id갑을 체크하여 div에 style="display:block;"추가하 할려합니다

 

주소창에서 id=1일대 display:block;하고 나머지는 display:none;로 하게 할려고 합니다

<div class="list_1" style="display:block;"></div>

<div class="list_2" style="display:none;"></div>

<div class="list_3" style="display:none;"></div>

<div class="list_4" style="display:none;"></div>

 

 

php페이지 아니고 html페이지입니다

이 질문에 댓글 쓰기 :

답변 2


<div class="list_1"></div>
<div class="list_2"></div>
<div class="list_3"></div>
<div class="list_4"></div>
<script>
n = location.href.split("?id=")[1];
for (i = 1; i <= 4; i++) document.querySelector(".list_" + i).style.display = "none";
document.querySelector(".list_" + n).style.display = "block";
</script>

<script>
  // URL에서 id 값을 가져옵니다.
  var id = window.location.href.split('?')[1].split('=')[1];
  
  // id 값에 해당하는 div의 스타일을 변경합니다.
  if (id === '1') {
    document.getElementById('list_1').style.display = 'block';
  } else {
    document.getElementById('list_1').style.display = 'none';
  }
  if (id === '2') {
    document.getElementById('list_2').style.display = 'block';
  } else {
    document.getElementById('list_2').style.display = 'none';
  }
  if (id === '3') {
    document.getElementById('list_3').style.display = 'block';
  } else {
    document.getElementById('list_3').style.display = 'none';
  }
  if (id === '4') {
    document.getElementById('list_4').style.display = 'block';
  } else {
    document.getElementById('list_4').style.display = 'none';
  }
</script>
<div id="list_1" class="list_1" style="display:none;">List 1</div>
<div id="list_2" class="list_2" style="display:none;">List 2</div>
<div id="list_3" class="list_3" style="display:none;">List 3</div>
<div id="list_4" class="list_4" style="display:none;">List 4</div>
답변을 작성하시기 전에 로그인 해주세요.
전체 52
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT