JS 로 옵션 구현
사례 설명
브 라 우 저 에 옵션 인터페이스 를 표시 합 니 다.머리 는 1,2,3,4,5 입 니 다.머리 에 있 는 임의의 숫자 를 누 르 면 아래 에 서로 다른 정 보 를 표시 하고 마우스 가 임의의 숫자 에 머 물 렀 을 때 숫자의 색상 이 변 합 니 다.사례 는 아래 그림 과 같다.
기본 값 은 숫자 1 의 내용 입 니 다.
클릭 숫자 2
다른 숫자 를 클릭 하여 유추 하면 여기 서 일일이 보 여주 지 않 습 니 다.
HTML 코드
모든 HTML 코드 전시
<div id="table">
<!-- -->
<div id="header">
<ul>
<li class="selected">
<a href="#" >1</a>
</li>
<li>
<a href="#" >2</a>
</li>
<li>
<a href="#" >3</a>
</li>
<li>
<a href="#" >4</a>
</li>
<li>
<a href="#" >5</a>
</li>
</ul>
</div>
<!-- -->
<div id="content">
<div class="dom" style="display: block">
<ul>
<li> <a href="#" > 1</a></li>
<li> <a href="#" > 2</a></li>
<li> <a href="#" > 3</a></li>
<li> <a href="#" > 4</a></li>
</ul>
</div>
<div class="dom">
<ul>
<li> <a href="#" > 1</a></li>
<li> <a href="#" > 2</a></li>
<li> <a href="#" > 3</a></li>
<li> <a href="#" > 4</a></li>
</ul>
</div>
<div class="dom">
<ul>
<li> <a href="#" > 1</a></li>
<li> <a href="#" > 2</a></li>
<li> <a href="#" > 3</a></li>
<li> <a href="#" > 4</a></li>
</ul>
</div>
<div class="dom">
<ul>
<li> <a href="#" > 1</a></li>
<li> <a href="#" > 2</a></li>
<li> <a href="#" > 3</a></li>
<li> <a href="#" > 4</a></li>
</ul>
</div>
<div class="dom">
<ul>
<li> <a href="#" > 1</a></li>
<li> <a href="#" > 2</a></li>
<li> <a href="#" > 3</a></li>
<li> <a href="#" > 4</a></li>
</ul>
</div>
</div>
</div>
</body>머리 는 5 개의 li 라벨 이 포 함 된 목록 으로 구성 되 어 있 으 며,각각 li 라벨 에는 a 라벨 이 포함 되 어 있 습 니 다.
여기 selected 선택 기의 역할 은 선택 한 li 의 배경 색 을 바 꾸 는 것 입 니 다.
<div id="header">
<ul>
<li class="selected">
<a href="#" >1</a>
</li>
<li>
<a href="#" >2</a>
</li>
<li>
<a href="#" >3</a>
</li>
<li>
<a href="#" >4</a>
</li>
<li>
<a href="#" >5</a>
</li>
</ul>
</div>여기 서 dom 선택 기 를 포함 한 div 는 각각 옵션 의 내용 을 나 타 냅 니 다.
.dom 선택 기 에 display:none 설정;,모든 옵션 의 내용 을 숨 깁 니 다.
보 여 주 는 내용 에 스타일="display:block"을 추가 합 니 다.브 라 우 저 에 보 여 주 는 속성
<div id="content">
<div class="dom" style="display: block">
<ul>
<li> <a href="#" > 1</a></li>
<li> <a href="#" > 2</a></li>
<li> <a href="#" > 3</a></li>
<li> <a href="#" > 4</a></li>
</ul>
</div>
<div class="dom">
<ul>
<li> <a href="#" > 1</a></li>
<li> <a href="#" > 2</a></li>
<li> <a href="#" > 3</a></li>
<li> <a href="#" > 4</a></li>
</ul>
</div>
<div class="dom">
<ul>
<li> <a href="#" > 1</a></li>
<li> <a href="#" > 2</a></li>
<li> <a href="#" > 3</a></li>
<li> <a href="#" > 4</a></li>
</ul>
</div>
<div class="dom">
<ul>
<li> <a href="#" > 1</a></li>
<li> <a href="#" > 2</a></li>
<li> <a href="#" > 3</a></li>
<li> <a href="#" > 4</a></li>
</ul>
</div>
<div class="dom">
<ul>
<li> <a href="#" > 1</a></li>
<li> <a href="#" > 2</a></li>
<li> <a href="#" > 3</a></li>
<li> <a href="#" > 4</a></li>
</ul>
</div>
</div>css 코드 는 자세 한 설명 을 하지 않 겠 습 니 다.
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
}
a {
display: inline-block;
color: black;
float: left;
text-align: center;
}
#table {
width: 500px;
height: 170px;
margin: 0 auto;
margin-top: 50px;
border: 1px solid #e0e0e0;
}
/* */
#table #header {
width: 100%;
height: 50px;
}
#table #header a {
width: 20%;
line-height: 50px;
background-color: #e0e0e0;
}
#table #header a:hover {
color: red;
}
#table #header .selected a{
background-color:whitesmoke;
}
/* */
#table #content {
width: 100%;
height: 120px;
}
#table #content .dom {
margin-top: 10px;
display: none;
}
#table #content .dom a{
width: 50%;
padding: 10px 0;
}JS 코드 가 실현 해 야 할 것 은 옵션 카드 숫자 를 클릭 할 때마다 해당 하 는 옵션 카드 내용 을 표시 하 는 것 입 니 다.
그리고 머리 스타일 을 바 꿔 주세요.
모든 JS 코드 표시
<script>
window.onload = function(){
//
var header = document.getElementById('header');
var hLi = header.getElementsByTagName('li');
var dom = document.getElementsByClassName('dom');
// console.log(dom);
// hLi li
for (let index = 0; index < hLi.length; index++) {
// li
let li = hLi[index];
// li content
li.addEventListener('click',function(){
// li
li.setAttribute('class','selected');
// li class null
for (let j = 0; j < hLi.length; j++) {
if( j != index && hLi[j].getAttribute('class') == 'selected'){
hLi[j].setAttribute('class','null');
break;
}
}
// content
// dom k dom
for (let k = 0; k< hLi.length; k++) {
if(index === k)
dom[k].style.display = 'block';
else
dom[k].style.display = 'none';
}
});
}
}
</script>모든 li 태그 에 감청 기 를 추가 하고 클릭 한 li 태그 의 class 속성 을 selected 로 설정 하여 브 라 우 저 에 보 여 줍 니 다.
각각 li 탭 의 class 속성 값 을 for 순환 으로 옮 겨 다 니 는 값 을 사용 합 니 다.이 속성 값=='selected'가 방금 클릭 한 li 탭 이 아니라면 이 탭 의 class 속성 값 을*'null'*로 변경 합 니 다.
// li
let li = hLi[index];
// li content
li.addEventListener('click',function(){
// li
li.setAttribute('class','selected');
// li class null
for (let j = 0; j < hLi.length; j++) {
if( j != index && hLi[j].getAttribute('class') == 'selected'){
hLi[j].setAttribute('class','null');
break;
}
}하나의 for 문 구 를 사용 하여 모든 dom 을 옮 겨 다 닙 니 다.이 dom 의 아래 표 시 는 클릭 한 li 태그 의 아래 표 시 와 같 으 면 이 dom 의 display 를 block 으로 설정 합 니 다.그렇지 않 으 면 none 으로 설정 합 니 다.
// content
// dom k dom
for (let k = 0; k< hLi.length; k++) {
if(index === k)
dom[k].style.display = 'block';
else
dom[k].style.display = 'none';
} 코드 하나 가 좀 복잡 해 졌어 요.여기 더 간단 한 방법 이 있어 요.설명 을 많이 하지 않 겠 습 니 다.
중요 한 부분 과 이 해 는 모두 주석 에서 언급 되 었 다.
window.onload = function(){
//
var header = document.getElementById('header');
var hLi = $('header').getElementsByTagName('li');
var dom = $('content').getElementsByClassName('dom');
for (let index = 0; index < hLi.length; index++) {
let li = hLi[index];
//
li.addEventListener('click',function(){
//
for (let j = 0; j< hLi.length; j++) {
hLi[j].className = ''; // class
dom[j].style.display = 'none'; //
}
this.className = 'selected'; // li
dom[index].style.display = 'block'; // li
});
}
//
function $(id) {
return typeof id === 'string'? document.getElementById(id) : null;
}
}이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
