탭 예제_javascript 기술의 JS 구현에 대한 자세한 설명
- WBOY원래의
- 2016-05-16 15:31:501655검색
이 글의 예시에서는 JS에서 탭을 구현하는 방법을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.
아이디어: 탭은 버튼을 클릭하여 해당 콘텐츠로 전환하는 것입니다. 실제로는 버튼을 클릭하여 표시를 통해 콘텐츠를 전환하는 것입니다(차단 없음).
1. 먼저 요소를 가져옵니다.
2. for 루프는 버튼 요소를 순회하여 onclick 또는 onmousemove 이벤트를 추가합니다.
3. 현재 버튼을 클릭하면 강조 표시된 상태로 표시되므로 for 루프를 통해 모든 버튼 스타일을 비우고 모든 DIV 표시를 없음으로 설정해야 합니다.
4. 현재 버튼에 스타일을 추가하고 현재 DIV를 표시하며 표시를 차단으로 설정합니다.
참고: 여러 요소에 여러 이벤트를 추가하려면 for 루프를 사용하여 순회해야 합니다. 클릭하여 탭을 전환하는 경우 현재 버튼 높이, 클릭 및 버튼 강조 표시는 두 가지 이벤트이므로 두 개의 for 루프를 사용하여 탭을 탐색합니다.
HTML 코드:
<div id="box"> <input type="button" value="1" /> <input type="button" value="2" /> <input type="button" value="3" /> <input type="button" value="4" /> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div>
JS 코드:
<script>
window.onload=function(){
var box=document.getElementById('box');
var input=box.getElementsByTagName('input');
var div=box..getElementsByTagName('div');
for(var i=0;i<input.length;i++){ //循环历遍onclick事件
input[i].index=i; //input[0].index=0 index是自定义属性
input[i].onclick=function(){
for(var i=0;i<input.length;i++){ //循环历遍去掉button样式和把div隐藏
input[i].className='';
div[i].style.display='none';
};
this.className='active'; //当前按钮添加样式
div[this.index].style.display='block'; //div显示 this.index是当前div 即div[0]之类的
};
};
};
</script>
추가: js로 간단한 탭을 작성하는 단계 완료
사진처럼 가장 심플한 퓨어탭
첫 번째 단계는 물론 HTML 코드와 CSS 스타일을 작성하는 것입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>无标题文档</title>
<style>
body,ul,li{margin:0; padding:0; font:12px/1.5 arial;}
ul,li{list-style:none;}
.wrap{width:500px; margin:20px auto;}
.hide{display:none;}
#tab_t{height:25px;border-bottom:1px solid #ccc;}
#tab_t li{float:left; width:80px; height:24px; line-height:24px; margin:0 4px; text-align:center; border:1px solid #ccc; border-bottom:none; background:#f5f5f5; cursor:pointer}
#tab_t .act{ position:relative; height:25px; margin-bottom:-1px; background:#fff;}
#tab_c{border:1px solid #ccc; border-top:none; padding:20px;}
</style>
</head>
<body>
<div class="wrap">
<ul id="tab_t">
<li class="act">选择1</li>
<li>选择2</li>
<li>选择3</li>
<li>选择4</li>
</ul>
<div id="tab_c">
<div>内容1</div>
<div class="hide">内容2</div>
<div class="hide">内容3</div>
<div class="hide">内容4</div>
</div>
</div>
</body>
</html>
두 번째 단계는 간단한 전환 효과를 구현하는 것입니다
포인트 1: abc.document.getElementsByTagName("li"): abc 아래에 li 태그가 있는 모든 요소를 가져옵니다. 반환되는 것은 배열의 일부 속성을 가진 요소 컬렉션입니다.
포인트 2: 반복합니다. 먼저 onclick 이벤트를 li에 추가한 다음 onlink 이벤트를 클릭하면 다시 반복하여 모든 탭의 행위 스타일을 제거하고 모든 콘텐츠를 숨깁니다. 그런 다음 클릭한 옵션과 해당 콘텐츠가 표시되도록 합니다.
포인트 3: tab_t_li[i].index = i; 루프할 때 탭에 추가 속성을 추가하고 탭과 콘텐츠에 일치하는 값을 할당합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>无标题文档</title>
<style>
body,ul,li{margin:0; padding:0; font:12px/1.5 arial;}
ul,li{list-style:none;}
.wrap{width:500px; margin:20px auto;}
.hide{display:none;}
#tab_t{height:25px;border-bottom:1px solid #ccc;}
#tab_t li{float:left; width:80px; height:24px; line-height:24px; margin:0 4px; text-align:center; border:1px solid #ccc; border-bottom:none; background:#f5f5f5; cursor:pointer}
#tab_t .act{ position:relative; height:25px; margin-bottom:-1px; background:#fff;}
#tab_c{border:1px solid #ccc; border-top:none; padding:20px;}
</style>
<script>
window.onload = function(){
var tab_t = document.getElementById("tab_t");
var tab_t_li = tab_t.getElementsByTagName("li");
var tab_c = document.getElementById("tab_c");
var tab_c_li = tab_c.getElementsByTagName("div");
var len = tab_t_li.length;
var i=0;
for(i=0; i<len; i++){
tab_t_li[i].index = i;
tab_t_li[i].onclick = function(){
for(i=0; i<len; i++){
tab_t_li[i].className = '';
tab_c_li[i].className = 'hide';
}
tab_t_li[this.index].className = 'act';
tab_c_li[this.index].className = '';
}
}
}
</script>
</head>
<body>
<div class="wrap">
<ul id="tab_t">
<li class="act">选择1</li>
<li>选择2</li>
<li>选择3</li>
<li>选择4</li>
</ul>
<div id="tab_c">
<div>内容1</div>
<div class="hide">内容2</div>
<div class="hide">内容3</div>
<div class="hide">内容4</div>
</div>
</div>
</body>
</html>
세 번째 단계는 함수로 작성하는 것입니다. 위의 작성 방법은 페이지당 하나의 탭만 사용할 수 있습니다. 탭을 하나 더 추가할 경우 복사본을 만들고 많은 변수 이름을 변경해야 합니다.
핵심사항: tab_t_li[i][evt] 값을 문자열로 전달하기 때문에 직접 쓰면 tab_t_li[i]가 됩니다. "onclick"은 이렇게 실행할 수 없지만 tab_t_li[" onclick"] 이렇게 실행되나요? 질문입니다.
자, 이제 한 페이지에 여러 개의 스위치를 가질 수 있습니다. 함수 호출 시 해당 ID 이름, 태그 이름, 이벤트 이름만 작성하면 됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>无标题文档</title>
<style>
body,ul,li{margin:0; padding:0; font:12px/1.5 arial;}
ul,li{list-style:none;}
.wrap{width:500px; margin:20px auto;}
.hide{display:none;}
#tab_t{height:25px;border-bottom:1px solid #ccc;}
#tab_t li{float:left; width:80px; height:24px; line-height:24px; margin:0 4px; text-align:center; border:1px solid #ccc; border-bottom:none; background:#f5f5f5; cursor:pointer}
#tab_t .act{ position:relative; height:25px; margin-bottom:-1px; background:#fff;}
#tab_c{border:1px solid #ccc; border-top:none; padding:20px;}
</style>
<script>
window.onload = function(){
tab("tab_t","li","tab_c","div","onmouseover")
function tab(tab_t,tab_t_tag,tab_c,tag_c_tag,evt){
var tab_t = document.getElementById(tab_t);
var tab_t_li = tab_t.getElementsByTagName(tab_t_tag);
var tab_c = document.getElementById(tab_c);
var tab_c_li = tab_c.getElementsByTagName(tag_c_tag);
var len = tab_t_li.length;
var i=0;
for(i=0; i<len; i++){
tab_t_li[i].index = i;
tab_t_li[i][evt] = function(){
for(i=0; i<len; i++){
tab_t_li[i].className = '';
tab_c_li[i].className = 'hide';
}
tab_t_li[this.index].className = 'act';
tab_c_li[this.index].className = '';
}
}
}
}
</script>
</head>
<body>
<div class="wrap">
<ul id="tab_t">
<li class="act">选择1</li>
<li>选择2</li>
<li>选择3</li>
<li>选择4</li>
</ul>
<div id="tab_c">
<div>内容1</div>
<div class="hide">内容2</div>
<div class="hide">内容3</div>
<div class="hide">内容4</div>
</div>
</div>
</body>
</html>
이 기사가 JavaScript 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.