JavaScript 기반의 범용 탭 구현(강력한 다양성)_javascript 기술-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

JavaScript 기반의 범용 탭 구현(강력한 다양성)_javascript 기술

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:21 PM

탭은 다양한 웹사이트에서 사용되지만, 달성하려는 목적은 동일합니다. 일반적으로 탭은 분류나 웹 페이지 공간 절약을 위해 사용됩니다. one 탭의 코드 예제는 매우 다양하므로 아래에서 공유하겠습니다.

코드 예시는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>js实现的可以通用的选项卡代码实例</title>
<style type="text/css">
body {text-align:center;}
.tab1, .tab2 
{
width:350px;
margin:0 5px;
background:#CC9933;
opacity:0.5;
border-radius:5px 5px 5px 5px;
box-shadow:#CCC 4px 4px 4px;
text-align:left;
float:left;
display:inline;
}
.name 
{
list-style:none;
overflow:hidden;
}
.name li 
{
width:90px;
font:bold 16px/30px Verdana, Geneva, sans-serif;
background:#669900;
text-align:center;
border-radius:5px 5px 5px;
margin-right:5px;
float:left;
display:inline;
cursor:pointer;
}
li.selected{background:#FF9900;}
.content li 
{
height:500px;
display:none;
}
</style>
<script type="text/javascript">
/** 
* 事件处理通用函数
*/
var EventUtil={
getEvent:function(event)
{
return event &#63; event : window.event;
},
getTarget:function(event)
{
return event.target||event.srcElement;
},
addHandler:function(element,type,handler)
{
if(element.addEventListener)
{
element.addEventListener(type,handler,false);
}
else if(element.attachEvent)
{
element.attachEvent("on"+type,handler);
}
else
{
element["on"+type] = handler;
} 
}
};
/**
* 选项卡通用函数
*/
// 传入参数inClassName设定为绑定的选项卡类名，参数triggerType设定为触发切换的类型
function tabSwitch(inClassName,triggerType){
//取得全部选项卡区域
if(document.querySelectorAll)
{
var tabs=document.querySelectorAll("."+inClassName);
}
else
{
var divs=document.getElementsByTagName("div");
var tabs = new Array();
for(var k=0,lenDiv=divs.length;k<lenDiv;k++)
{
if(divs[k].className.indexOf(inClassName)>-1)
{
tabs.push(divs[k]);
}
}
}
//为每个选项卡建立切换功能
for(var j=0,len=tabs.length; j<len; j++)
{
//获取标题和内容列表
var tab = tabs[j];
//使用私有作用域为每个选项卡建立切换
(function(){
var nameUl = tab.getElementsByTagName("ul")[0];
var content = tab.getElementsByTagName("ul")[1];
//初始化选项卡
nameUl.getElementsByTagName("li")[0].className = "selected";
content.getElementsByTagName("li")[0].style.display = "block";
//添加事件委托
EventUtil.addHandler(nameUl,triggerType,function(event)
{
//获取事件对象
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
//选项卡切换
if(target.nodeName.toLowerCase() == "li")
{
//分别取得标题列表项和内容列表项
var nameList = nameUl.getElementsByTagName("li");
var contentList = content.getElementsByTagName("li");
//标题添加selected类，并显示内容
for(var i=0,len=nameList.length; i<len; i++)
{
nameList[i].className = "";
contentList.style.display = "none";
if(nameList == target)
{
nameList.className = "selected";
contentList.style.display = "block";
}
}
}
});
})();
}
}
window.onload=function()
{
//设置选项卡切换方式
tabSwitch("tab1","click");
tabSwitch("tab2","mouseover");
}
</script>
</head>
<body>
<div class="tab1">
<ul class="name">
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
<ul class="content">
<li>类为<em>"tab1"</em>项目一内容,通过<em>"click"</em>触发</li>
<li>类为<em>"tab1"</em>项目二内容,通过<em>"click"</em>触发</li>
<li>类为<em>"tab1"</em>项目三内容,通过<em>"click"</em>触发</li>
</ul>
</div>
<div class="tab1">
<ul class="name">
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
<ul class="content">
<li>类为<em>"tab1"</em>项目一内容,通过<em>"click"</em>触发</li>
<li>类为<em>"tab1"</em>项目二内容,通过<em>"click"</em>触发</li>
<li>类为<em>"tab1"</em>项目三内容,通过<em>"click"</em>触发</li>
</ul>
</div>
<div class="tab2">
<ul class="name">
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
<ul class="content">
<li>类为<em>"tab2"</em>项目一内容,通过<em>"mouseover"</em>触发</li>
<li>类为<em>"tab2"</em>项目二内容,通过<em>"mouseover"</em>触发</li>
<li>类为<em>"tab2"</em>"项目三内容,通过<em>"mouseover"</em>触发</li>
</ul>
</div>
</body>
</html>

위 코드는 탭의 기능을 구현한 것입니다. 구현 과정을 간략하게 소개합니다.

1. 구현 원칙:

많은 코드처럼 보이지만 원리는 매우 간단합니다. 여기서는 원리를 간략하게만 소개하겠습니다. 자세한 내용은 코드 주석을 참조하고 각자의 생각에 따라 결정하세요. 기본 상태에서는 탭의 제목이 표시되고 첫 번째 제목에는 지정된 스타일 클래스가 할당됩니다. 첫 번째 탭 내용만 표시되고 나머지는 숨겨집니다. 이는 기본 상태에서 첫 번째 선택 효과를 나타냅니다. . 각 탭 제목은 지정된 이벤트 핸들러에 등록됩니다. 클릭 또는 스와이프 작업이 수행되면 주로 순회를 통해 해당 스위치가 구현될 수 있습니다. 여기서는 자세히 설명하지 않겠습니다.

2. 코드 주석:

1.var EventUtil={}은 이벤트 객체, 이벤트 소스 객체 및 이벤트 처리 함수 바인딩을 얻는 작업을 내부적으로 구현하고 주요 브라우저와 호환되는 객체 리터럴을 선언합니다.
2. getEvent:function(event){return event? event: window.event;}, 모든 주요 브라우저와 호환되는 이벤트 객체를 가져옵니다.
3.getTarget:function(event){return event.target||event.srcElement;}, 주요 브라우저와 호환되는 이벤트 소스 객체를 가져옵니다.
4.addHandler:function(element,type,handler){}, 등록된 이벤트 처리 함수는 모든 주요 브라우저와 호환됩니다.
5.function tabSwitch(inClassName,triggerType){}, 이 함수는 지정된 개체에 대해 지정된 이벤트 처리 함수를 등록할 수 있습니다. 여기에는 두 개의 매개 변수가 있으며, 첫 번째 매개 변수는 해당 이름을 가진 개체를 가져오는 데 사용됩니다. 2개는 이벤트 유형입니다.
6.if(document.querySelectorAll), 브라우저가 querySelectorAll 기능을 지원하는지 여부를 결정하는 데 사용됩니다.
7.var tabs=document.querySelectorAll("." inClassName)은 지원되는 경우 지정된 클래스 이름을 가진 객체를 가져옵니다.
8.var divs=document.getElementsByTagName("div"), div 개체 컬렉션을 가져옵니다.
9.var tabs=new Array(), 지정된 스타일 클래스를 사용하여 div 객체를 저장하기 위한 배열을 만듭니다.
10.for(var k=0,lenDiv=divs.length;k 11.if(divs[k].className.indexOf(inClassName)>-1), div의 스타일 클래스 이름에 지정된 스타일 클래스 이름이 포함되어 있는 경우.
12. tabs.push(divs[k]), 이 div를 배열에 저장합니다.
13.for(var j=0,len=tabs.length;j 14.var tab=tabs[j], div 개체의 참조를 탭에 할당합니다.
15.(function(){})(), 익명 함수를 선언하고 실행합니다.
16.var nameUl=tab.getElementsByTagName("ul")[0], 탭의 제목 부분인 ul 컬렉션의 첫 번째 항목을 가져옵니다.
17.var content=tab.getElementsByTagName("ul")[1], 탭의 콘텐츠 부분을 가져옵니다.
18.nameUl.getElementsByTagName("li")[0].className="selected", 탭 제목 부분의 첫 번째 제목의 스타일 클래스 값을 선택됨으로 설정합니다.
19.content.getElementsByTagName("li")[0].style.display="block", 표시할 탭의 첫 번째 콘텐츠 부분을 설정합니다.
20.EventUtil.addHandler(nameUl,triggerType,function(event){}) 이 함수는 탭 구현의 핵심 부분으로 3개의 매개변수를 가지고 있습니다. 첫 번째 매개변수는 제목 부분의 ul 객체이고, 두 번째 매개변수는 event type. 세 번째 함수는 등록할 이벤트 처리 함수입니다.
21.var event=EventUtil.getEvent(event), 이벤트 객체를 가져옵니다.
22.var target=EventUtil.getTarget(event), 이벤트 소스 객체를 가져옵니다.
23.if(target.nodeName.toLowerCase()=="li"), 이벤트 소스 객체의 레이블 이름이 li인지 확인합니다.
24.var nameList=nameUl.getElementsByTagName("li")는 탭 제목 부분에서 li 요소 컬렉션을 가져옵니다.
25.var contentList=content.getElementsByTagName("li"), 탭 콘텐츠 부분에서 li 요소의 조합을 가져옵니다.
26.for(var i=0,len=nameList.length;i 27.nameList.className="", 각 제목 li 요소의 스타일 클래스를 지웁니다.
28.contentList.style.display="none", 각 탭의 콘텐츠 부분에서 li을 숨깁니다.
29.if(nameList==target), 지정된 인덱스의 제목 li가 이벤트 소스 객체, 즉 현재 마우스로 클릭한 li 또는 마우스가 슬라이드한 li인 경우입니다.
30.nameList.className="selected", 그런 다음 지정된 스타일 클래스를 추가합니다.
31.contentList.style.display="block" 은 인덱스에 해당하는 콘텐츠 li를 표시합니다.

위 내용은 코드와 설명을 포함해 비교적 자세하게 소개되어 있어 탭의 js 구현을 배우는 모든 분들에게 도움이 되기를 바랍니다.

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

JavaScript의 역할 : 웹 대화식 및 역동적 인 웹Apr 24, 2025 am 12:12 AM

JavaScript는 웹 페이지의 상호 작용과 역학을 향상시키기 때문에 현대 웹 사이트의 핵심입니다. 1) 페이지를 새로 고치지 않고 콘텐츠를 변경할 수 있습니다. 2) Domapi를 통해 웹 페이지 조작, 3) 애니메이션 및 드래그 앤 드롭과 같은 복잡한 대화식 효과를 지원합니다. 4) 성능 및 모범 사례를 최적화하여 사용자 경험을 향상시킵니다.

C 및 JavaScript : 연결이 설명되었습니다Apr 23, 2025 am 12:07 AM

C 및 JavaScript는 WebAssembly를 통한 상호 운용성을 달성합니다. 1) C 코드는 WebAssembly 모듈로 컴파일되어 컴퓨팅 전력을 향상시키기 위해 JavaScript 환경에 도입됩니다. 2) 게임 개발에서 C는 물리 엔진 및 그래픽 렌더링을 처리하며 JavaScript는 게임 로직 및 사용자 인터페이스를 담당합니다.

웹 사이트에서 앱으로 : 다양한 JavaScript 애플리케이션Apr 22, 2025 am 12:02 AM

JavaScript는 웹 사이트, 모바일 응용 프로그램, 데스크탑 응용 프로그램 및 서버 측 프로그래밍에서 널리 사용됩니다. 1) 웹 사이트 개발에서 JavaScript는 HTML 및 CSS와 함께 DOM을 운영하여 동적 효과를 달성하고 jQuery 및 React와 같은 프레임 워크를 지원합니다. 2) 반응 및 이온 성을 통해 JavaScript는 크로스 플랫폼 모바일 애플리케이션을 개발하는 데 사용됩니다. 3) 전자 프레임 워크를 사용하면 JavaScript가 데스크탑 애플리케이션을 구축 할 수 있습니다. 4) node.js는 JavaScript가 서버 측에서 실행되도록하고 동시 요청이 높은 높은 요청을 지원합니다.

Python vs. JavaScript : 사용 사례 및 응용 프로그램 비교Apr 21, 2025 am 12:01 AM

Python은 데이터 과학 및 자동화에 더 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 더 적합합니다. 1. Python은 데이터 처리 및 모델링을 위해 Numpy 및 Pandas와 같은 라이브러리를 사용하여 데이터 과학 및 기계 학습에서 잘 수행됩니다. 2. 파이썬은 간결하고 자동화 및 스크립팅이 효율적입니다. 3. JavaScript는 프론트 엔드 개발에 없어서는 안될 것이며 동적 웹 페이지 및 단일 페이지 응용 프로그램을 구축하는 데 사용됩니다. 4. JavaScript는 Node.js를 통해 백엔드 개발에 역할을하며 전체 스택 개발을 지원합니다.

JavaScript 통역사 및 컴파일러에서 C/C의 역할Apr 20, 2025 am 12:01 AM

C와 C는 주로 통역사와 JIT 컴파일러를 구현하는 데 사용되는 JavaScript 엔진에서 중요한 역할을합니다. 1) C는 JavaScript 소스 코드를 구문 분석하고 추상 구문 트리를 생성하는 데 사용됩니다. 2) C는 바이트 코드 생성 및 실행을 담당합니다. 3) C는 JIT 컴파일러를 구현하고 런타임에 핫스팟 코드를 최적화하고 컴파일하며 JavaScript의 실행 효율을 크게 향상시킵니다.

자바 스크립트 행동 : 실제 예제 및 프로젝트Apr 19, 2025 am 12:13 AM

실제 세계에서 JavaScript의 응용 프로그램에는 프론트 엔드 및 백엔드 개발이 포함됩니다. 1) DOM 운영 및 이벤트 처리와 관련된 TODO 목록 응용 프로그램을 구축하여 프론트 엔드 애플리케이션을 표시합니다. 2) Node.js를 통해 RESTFULAPI를 구축하고 Express를 통해 백엔드 응용 프로그램을 시연하십시오.

JavaScript 및 웹 : 핵심 기능 및 사용 사례Apr 18, 2025 am 12:19 AM

웹 개발에서 JavaScript의 주요 용도에는 클라이언트 상호 작용, 양식 검증 및 비동기 통신이 포함됩니다. 1) DOM 운영을 통한 동적 컨텐츠 업데이트 및 사용자 상호 작용; 2) 사용자가 사용자 경험을 향상시키기 위해 데이터를 제출하기 전에 클라이언트 확인이 수행됩니다. 3) 서버와의 진실한 통신은 Ajax 기술을 통해 달성됩니다.

JavaScript 엔진 이해 : 구현 세부 사항Apr 17, 2025 am 12:05 AM

보다 효율적인 코드를 작성하고 성능 병목 현상 및 최적화 전략을 이해하는 데 도움이되기 때문에 JavaScript 엔진이 내부적으로 작동하는 방식을 이해하는 것은 개발자에게 중요합니다. 1) 엔진의 워크 플로에는 구문 분석, 컴파일 및 실행; 2) 실행 프로세스 중에 엔진은 인라인 캐시 및 숨겨진 클래스와 같은 동적 최적화를 수행합니다. 3) 모범 사례에는 글로벌 변수를 피하고 루프 최적화, Const 및 Lets 사용 및 과도한 폐쇄 사용을 피하는 것이 포함됩니다.

See all articles