기본 JS 구현: Tap 효과, 모드 상자 효과
코드:
Tab
-
-
-
-
JavaScript HTML 。
JavaScript ， 、 、 ，
。 JavaScript ， 。
-
， div， div， div click ？ ：
1.IE ： ， 。
2.Netscape ： ， ， 。
3.DOM ：DOM2 ， ， ， ， ，
， ， 。
-
（listener）， 。
click、load、mouseover ， （ ）， 。
， ， ， 。
var tabHeader = document.querySelector('.tab-header');
var tabHeaderLis = document.querySelectorAll('.tab-header>li');
var tabContentLis = document.querySelectorAll('.tab-content>li');
tabHeader.addEventListener('click',function(e){
var clickNode = e.target; //
if(clickNode.tagName.toLowerCase() === 'li'){
for(i=0; i<tabHeaderLis.length; i++){ // tabHeaderLis
tabHeaderLis[i].classList.remove('active'); // tabHeaderLis active active border: 1px solid #ccc;
}
clickNode.classList.add('active'); // active active border: 1px solid #ccc;
var idx = [].indexOf.call(tabHeaderLis,clickNode); //ES5 tabHeaderLis
for(i=0; i<tabContentLis.length; i++){
tabContentLis[i].classList.remove('active'); // active active display: block;
}
tabContentLis[idx].classList.add('active'); // active active display: block;
}
})
Tap 효과 미리 보기
모드 상자 효과
코드:
X
var btn = document.querySelector('#btn');
var box = document.querySelector('.box');
var close = document.querySelector('.close');
var cancel = document.querySelector('.cancel');
btn.addEventListener('click',function(e){
e.stopPropagation(); // btn ， ， 112 ， box 。
box.style.display = 'block';
document.body.classList.add('active');
})
box.addEventListener('click',function(e){
e.stopPropagation(); // box ， ， 112 ， box 。
})
window.addEventListener('click',function(){
box.style.display = 'none';
document.body.classList.remove('active'); // body active 。
})
close.addEventListener('click',function(){
box.style.display = 'none';
document.body.classList.remove('active');
})
cancel.addEventListener('click',function(){
box.style.display = 'none';
document.body.classList.remove('active');
})
모드 상자 효과 미리 보기
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
