js 간단 한 옵션 기능 실현

5493 단어 js옵션 카드
본 고 는 js 가 간단 한 옵션 카드 기능 을 실현 하 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
우선 HTML 코드 를 써 서 전체적인 구 조 를 구축 하 겠 습 니 다.
코드 는 다음 과 같 습 니 다:

<!--     HTML  -->
<nav id="nav">
 <ul>
 <li class="act">  1</li>
 <li>  2</li>
 <li>  3</li>
 <li>  4</li>
 </ul>
</nav>
<!--    HTML  -->
<div id="container">
 <section class="tab" style="background-color: tomato">  1</section>
 <section class="tab" style="background-color: cyan">  2</section>
 <section class="tab" style="background-color: blueviolet">  3</section>
 <section class="tab" style="background-color: gold">  4</section>
</div>
주:section 부분 에 style 을 추 가 했 습 니 다.프레젠테이션 을 편리 하 게 하기 위해 HTML 과 css 의 코드 스타일 을 규범화 하기 위해 서 는 이렇게 사용 하 는 것 을 추천 하지 않 습 니 다.
이어서 우 리 는 css 코드 를 사용 하여 스타일 을 구축 했다
코드 는 다음 과 같 습 니 다:

*{
 text-align: center;
 }
 nav li{
 display: inline;
 width: 24%;
 text-decoration: none;
 padding: 15px;
 }
 li:hover{
 background-color: lightblue;
 }
 section{
 height: 300px;
}
마지막 으로 js 코드 로 옵션 기능 실현
코드 는 다음 과 같 습 니 다:

window.onload=function () {
 //   li         tab
 var nav=document.getElementById('nav');
 var oNav=nav.getElementsByTagName('li');
 //      container   section（  ）
 var container=document.getElementById('container');
 var oDiv=container.getElementsByClassName('tab');
 //         li 
 for(var i=0;i<oNav.length;i++){
 oNav[i].index=i;
 //     li              function 
 oNav[i].onclick=function () { //        onclick，     onmouseover
 // li           
 for(var i=0;i<oNav.length;i++){
 oNav[i].className='';
 oDiv[i].style.display="none";
 }
 this.className='act';
 oDiv[this.index].style.display="block"
 }
 for(var m=1;m<oNav.length;m++){
 oNav[m].className='';
 oDiv[m].style.display="none";
 }
 }
};
이것 은 js 로 간단 한 옵션 카드 의 모든 내용 을 실현 하 는 것 입 니 다.다음은 전체 코드 입 니 다.컴 파일 러 에 복사 하여 붙 여 넣 으 면 실행 할 수 있 습 니 다.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 *{
 text-align: center;
 }
 nav li{
 display: inline;
 width: 24%;
 text-decoration: none;
 padding: 15px;
 }
 li:hover{
 background-color: lightblue;
 }
 section{
 height: 300px;
 }
 </style>
</head>
<body>
<!--     HTML  -->
<nav id="nav">
 <ul>
 <li class="act">  1</li>
 <li>  2</li>
 <li>  3</li>
 <li>  4</li>
 </ul>
</nav>
<!--    HTML  -->
<div id="container">
 <section class="tab" style="background-color: tomato">  1</section>
 <section class="tab" style="background-color: cyan">  2</section>
 <section class="tab" style="background-color: blueviolet">  3</section>
 <section class="tab" style="background-color: gold">  4</section>
</div>
<script>
 window.onload=function () {
 var nav=document.getElementById('nav');
 var oNav=nav.getElementsByTagName('li');

 var container=document.getElementById('container');
 var oDiv=container.getElementsByClassName('tab');
 for(var i=0;i<oNav.length;i++){
 oNav[i].index=i;
 oNav[i].onclick=function () {
 for(var i=0;i<oNav.length;i++){
 oNav[i].className='';
 oDiv[i].style.display="none";
 }
 this.className='act';
 oDiv[this.index].style.display="block"
 }
 for(var m=1;m<oNav.length;m++){
 oNav[m].className='';
 oDiv[m].style.display="none";
 }
 }
 };
</script>
</body>
</html>
다음은 효과 도.




주:인터넷 에 서 는 jQuery 로 옵션 을 실현 하 는 방법 도 많이 사용 되 고 있 습 니 다.세 줄 만 있 으 면 다음 에 알 아 보고 공유 하 겠 습 니 다.
만약 에 여러분 이 깊이 공부 하고 싶다 면 두 개의 멋 진 주 제 를 클릭 할 수 있 습 니 다.javascript 옵션 조작 방법 집합jquery 옵션 조작 방법 집합
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
Vue 개발 흡 정 효과 구현 예시 코드
js 라운드 맵 의 전체 코드 구현

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage