자바스크립트에서 탭 전환을 구현하는 네 가지 방법
- 高洛峰원래의
- 2017-02-08 16:48:381157검색
이 글에서는 자바스크립트에서 탭 전환을 구현하는 4가지 방법을 주로 소개하고, 각 방법에 대해 평가해 보도록 하겠습니다. 관심 있는 친구들은 참고하시기 바랍니다
탭 전환은 웹페이지에서 매우 흔한 일이므로 4가지 구현 방법을 정리해보았습니다. 최근에.
먼저 탭 프레임을 작성하고 가장 간단한 스타일을 추가합니다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
float:left;
}
#tabCon{
clear: both;
}
</style>
</head>
<body>
<p id="tanContainer">
<p id="tab">
<ul>
<li>标题一</li>
<li>标题二</li>
<li>标题三</li>
<li>标题四</li>
</ul>
</p>
<p id="tabCon">
<p>内容一</p>
<p>内容二</p>
<p>内容三</p>
<p>内容四</p>
</p>
</p>
</body>
</html>
현재 표시 효과는 다음과 같습니다. :
페이지에 4개의 탭 제목과 4개의 콘텐츠 영역이 표시됩니다. 이제 탭 전환 효과를 구현해야 합니다. 즉, 제목을 클릭하면 콘텐츠가 하나가 됩니다. 표시되고 다른 콘텐츠는 표시되지 않습니다. 제목 2를 클릭하면 콘텐츠 2가 표시되고 다른 콘텐츠는 표시되지 않습니다...
그러면 전체적인 아이디어는 매우 간단합니다. 이벤트를 4개의 제목에 묶고, 트리거되면 해당 콘텐츠가 표시되고 다른 콘텐츠는 숨겨집니다.
방법 1: 클릭한 제목에 해당하는 내용을 표시하고, 클릭하지 않은 제목에 해당하는 내용은 숨깁니다. 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
}
</style>
<script>
function tab(pid){
var tabs=["tab1","tab2","tab3","tab4"];
for(var i=0;i<4;i++){
if(tabs[i]==pid){
document.getElementById(tabs[i]).style.display="block";
}else{
document.getElementById(tabs[i]).style.display="none";
}
}
}
</script>
</head>
<body>
<p id="tanContainer">
<p id="tabNav">
<ul>
<li onclick="tab('tab1')">标题一</li>
<li onclick="tab('tab2')">标题二</li>
<li onclick="tab('tab3')">标题三</li>
<li onclick="tab('tab4')">标题四</li>
</ul>
</p>
<p id="tab">
<p id="tab1">内容一</p>
<p id="tab2">内容二</p>
<p id="tab3">内容三</p>
<p id="tab4">内容四</p>
</p>
</p>
</body>
</html>
방법 2: 먼저 모든 콘텐츠를 숨기도록 설정합니다. 을 클릭한 다음 제목 쌍을 클릭합니다. 사용된 콘텐츠가 표시됩니다. 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
float:left;
}
#tabCon{
clear: both;
}
#tabCon_1{
display: none;
}
#tabCon_2{
display: none;
}
#tabCon_3{
display: none;
}
</style>
<script>
function changeTab(tabCon_num){
for(i=0;i<=3;i++) {
document.getElementById("tabCon_"+i).style.display="none"; //将所有的层都隐藏
}
document.getElementById("tabCon_"+tabCon_num).style.display="block";//显示当前层
}
</script>
</head>
<body>
<p id="tanContainer">
<p id="tab">
<ul>
<li onclick="changeTab('0')">标题一</li>
<li onclick="changeTab('1')">标题二</li>
<li onclick="changeTab('2')">标题三</li>
<li onclick="changeTab('3')">标题四</li>
</ul>
</p>
<p id="tabCon">
<p id="tabCon_0">内容一</p>
<p id="tabCon_1">内容二</p>
<p id="tabCon_2">内容三</p>
<p id="tabCon_3">内容四</p>
</p>
</p>
</body>
</html>
방법3: 클래스 컨트롤을 통해 표시 및 숨기기, 먼저 모든 콘텐츠의 숨겨진 표시를 없음으로 설정하고, 클래스 표시를 차단하도록 설정합니다. 제목을 클릭하면 제목 노드와 해당 콘텐츠 노드에 클래스가 있고 나머지는 모두 순회됩니다. 하지 마십시오. 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
float:left;
}
#tabCon {
clear: both;
}
#tabCon p {
display:none;
}
#tabCon p.fp {
display:block;
}
</style>
</head>
<body>
<p id="tanContainer">
<p id="tab">
<ul>
<li class="fli">标题一</li>
<li>标题二</li>
<li>标题三</li>
<li>标题四</li>
</ul>
</p>
<p id="tabCon">
<p class="fp">内容一</p>
<p>内容二</p>
<p>内容三</p>
<p>内容四</p>
</p>
</p>
</body>
<script>
var tabs=document.getElementById("tab").getElementsByTagName("li");
var ps=document.getElementById("tabCon").getElementsByTagName("p");
for(var i=0;i<tabs.length;i++){
tabs[i].onclick=function(){change(this);}
}
function change(obj){
for(var i=0;i<tabs.length;i++){
if(tabs[i]==obj){
tabs[i].className="fli";
ps[i].className="fp";
}else{
tabs[i].className="";
ps[i].className="";
}
}
}
</script>
</html>
이 방법의 단점은 더 이상 p 태그가 아래에 있을 수 없다는 점입니다. 콘텐츠 블록의 p.
방법 4: js를 사용하는 대신 "input:checked"를 사용하여 탭을 전환합니다. 먼저 모든 콘텐츠를 숨기고 선택한 콘텐츠를 표시합니다. 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>input:checked实现tab切换</title>
<style>
input{
opacity: 0;/*隐藏input的选择框*/
}
label{
cursor: pointer;/*鼠标移上去变成手状*/
float: left;
}
label:hover{
background: #eee;
}
input:checked+label{
color: red;
}
/*选择前面有.tabs input:nth-of-type(x):checked的.panels .panel:nth-child(x)*/
.tabs input:nth-of-type(1):checked~.panels .panel:nth-child(1),
.tabs input:nth-of-type(2):checked~.panels .panel:nth-child(2){
opacity: 1;
}
.panel{
opacity: 0;
position: absolute;/*使内容区域位置一样*/
}
</style>
</head>
<body>
<p class="tabs">
<input checked id="one" name="tabs" type="radio">
<label for="one">标题一</label>
<input id="two" name="tabs" type="radio">
<label for="two">标题二</label>
<p class="panels">
<p class="panel">
<p>内容一</p>
</p>
<p class="panel">
<p>内容二</p>
</p>
</p>
</p>
</body>
</html>
이 방법의 단점은 다른 영역 간 전환이 다음으로만 수행될 수 있다는 것입니다. 클릭.
위 내용은 모든 사람을 위한 탭 전환 구현 방법을 요약한 것입니다. 이 아이디어를 따라 나만의 탭 전환 특수 효과를 만들어 보세요.
JavaScript를 사용한 탭 전환의 네 가지 방법에 대한 더 많은 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!