js-tab 옵션
1.먼저 결 과 를 봅 시다.
2.그림 에 따라 배치 할 수 있 습 니 다.먼저 위의 태그 와 아래 내용,
주의해 야 할 것 은 위의 a 탭 의 링크 를 클릭 하여 아래 div 의 id 와 일일이 대응 하 는 것 입 니 다.
3.가장 중요 한 js 부분 입 니 다.
이곳 은 몇 단계 로 나 누 어 생각 할 수 있다.
1.우선 이벤트 가 있어 야 클릭
2.내용 에 대응 하 는 a 탭 의 href 를 가 져 오 면 아래 를 표시 하거나 숨 길 수 있 습 니 다.
3.유일한 클 라 스 를 통 해 --> active 원 하 는 내용 으로 전환 하 겠 습 니 다.
4.css 를 더 하면 거의 완성 되 지 않 습 니 다.
여 기 는 수요 에 따라 스스로 정 하 세 요.중점 은 js 입 니 다.
5.이런 간단 한 작은 프로그램 은 거의 완성 되 었 다.하지만 자신 이 쓴 코드 는 끝까지 책임 져 야 하기 때문에 테스트 도 중요 하 다.
1.우선,클릭 한 옵션 에 편차 가 있 을 수 있 으 므 로 적당 한 판단 을 해 야 합 니 다.A 탭 을 눌 렀 을 때 만 터치 할 수 있 습 니 다.
메모:tagName 예:A 라벨
2.최적화 해 야 할 부분 이 하나 더 있 습 니 다.지금 첫 번 째 탭 에서 현재 탭 을 클릭 하면 프로그램 이 한 번 더 실 행 됩 니 다.보이 지 않 지만 하 나 는 최적화 하 는 것 이 좋 습 니 다.
클릭 할 때 판단 부터 해 주시 면 됩 니 다.
아래 에 저의 원본 코드 를 동봉 하 니 모두 함께 공부 하 시기 바 랍 니 다.여러분,많은 가르침 을 바 랍 니 다.언제든지 메 시 지 를 남 겨 주세요.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>tab </title>
<style type="text/css">
*{
font-family: simhei;
}
.tab-group{
padding: 1em 0em;
}
.tab-group>a{
padding: 1em 2em;
color: #666;
text-decoration: none;
}
.tab-group>.active{
padding: 1em 2em;
background: #999;
color: #fff;
}
.content-group{
width: 31.7%;
height: 10em;
background: #999;
color: #fff;
}
.content-group>.content-item{
display: none;
}
.content-group>.active{
display: inline-block;
}
</style>
</head>
<body>
<nav class="tab-group">
<a href="item01" rel="external nofollow" class="tab-item active"> </a>
<a href="item02" rel="external nofollow" class="tab-item"> </a>
<a href="item03" rel="external nofollow" class="tab-item"> </a>
</nav>
<div class="content-group">
<div class="content-item active" id="item01"> </div>
<div class="content-item" id="item02"> </div>
<div class="content-item" id="item03"> </div>
</div>
</body>
</html>
<script type="text/javascript">
document.querySelector(".tab-group").addEventListener('click',function(event){
var target = event.target;
//
if(target.tagName === 'A' && ~target.className.indexOf('tab-item')){
event.preventDefault();
if(~target.className.indexOf('active')){
return;
}
var href = target.getAttribute('href');//
//TODO
var activeTab = document.querySelector(".tab-group>.active");
activeTab.className = activeTab.className.replace(' active', '');
target.className = target.className + ' ' + "active";
//TODO
var activeContent = document.querySelector('.content-group>.active');
activeContent.classList.remove('active');
var contentElem = document.getElementById(href);
contentElem.classList.add("active");
}
},false);
</script>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 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에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
