求教原生JS写选项卡和页面内容切换效果
2个回答
展开全部
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选项卡tab</title>
<script src="jquery.min.js"></script>
<style type="text/css">
*{
margin:0;
padding:0;
}
.content{
width:400px;
height:40px;
border:1px solid #ccc;
margin:60px auto;
}
.content .nav li{
float:left;
text-align: center;
line-height: 40px;
width:50px;
border:1px solid #ccc;
}
.content li,.container li{
list-style: none;
}
.content .nav li a{
text-decoration: none;
display: block;
}
.active{
background-color: yellow;
}
.container{
clear: left;
width: 400px;
height: 100px;
border:1px solid #ccc;
overflow: hidden;
}
.container .text li{
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div class="content" id="content">
<ul class="nav" id="nav">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">语文</a></li>
<li><a href="#">数学</a></li>
<li><a href="#">英语</a></li>
<li><a href="#">法语</a></li>
</ul>
<div class="container">
<ul class="text" id="text">
<li style="display:block">这段文字0首页</li>
<li>这段文字1语文</li>
<li>这段文字2数学</li>
<li>这段文字3英语</li>
<li>这段文字4法语</li>
</ul>
</div>
</div>
<script>
var content = document.getElementById('content');
var nav = document.getElementById("nav");
var oli = nav.getElementsByTagName("li");
var otext = document.getElementById("text");
var ali = otext.getElementsByTagName("li");
for(var i = 0;i<oli.length;i++){
//为li指定索引
oli[i].id = i;
//为所有li绑定点击事件
oli[i].onclick=function(){
for(var j = 0;j<oli.length;j++){
oli[j].className="";
ali[j].style.display="none";
}
//当前为高亮显示
this.className="active";
ali[this.id].style="block";
}
}
</script>
</body>
</html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选项卡tab</title>
<script src="jquery.min.js"></script>
<style type="text/css">
*{
margin:0;
padding:0;
}
.content{
width:400px;
height:40px;
border:1px solid #ccc;
margin:60px auto;
}
.content .nav li{
float:left;
text-align: center;
line-height: 40px;
width:50px;
border:1px solid #ccc;
}
.content li,.container li{
list-style: none;
}
.content .nav li a{
text-decoration: none;
display: block;
}
.active{
background-color: yellow;
}
.container{
clear: left;
width: 400px;
height: 100px;
border:1px solid #ccc;
overflow: hidden;
}
.container .text li{
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div class="content" id="content">
<ul class="nav" id="nav">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">语文</a></li>
<li><a href="#">数学</a></li>
<li><a href="#">英语</a></li>
<li><a href="#">法语</a></li>
</ul>
<div class="container">
<ul class="text" id="text">
<li style="display:block">这段文字0首页</li>
<li>这段文字1语文</li>
<li>这段文字2数学</li>
<li>这段文字3英语</li>
<li>这段文字4法语</li>
</ul>
</div>
</div>
<script>
var content = document.getElementById('content');
var nav = document.getElementById("nav");
var oli = nav.getElementsByTagName("li");
var otext = document.getElementById("text");
var ali = otext.getElementsByTagName("li");
for(var i = 0;i<oli.length;i++){
//为li指定索引
oli[i].id = i;
//为所有li绑定点击事件
oli[i].onclick=function(){
for(var j = 0;j<oli.length;j++){
oli[j].className="";
ali[j].style.display="none";
}
//当前为高亮显示
this.className="active";
ali[this.id].style="block";
}
}
</script>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<ul>
<li target="#panel-1">TAB-1</li>
<li target="#panel-2">TAB-2</li>
<li target="#panel-3">TAB-3</li>
</ul>
<div id="panel-1">这是一个好的开始TAB-1</div>
<div id="panel-2">我们开始到这里了TAB-2</div>
<div id="panel-3">不一定要写如此的代码哦TAB-3</div>
JavaScript
(function(doc){
'use strict';
var slice = Array.prototype.slice;
//因为querySelectorAll返回的是一个array like对象，并不是真正的数组，所以我用Array原型上的slice方法将其处理成一个真正的数组，便于后面的forEarch调用
var tabs = slice.call(doc.querySelectorAll('ul li'));
var panels = slice.call(doc.querySelectorAll('div'));
//遍历每一个卡片tab标签，为其增加点击事件监听器
tabs.forEach(function(tab){
tab.addEventListener('click', function(){
//当点击这个tab标签时，先将所有的面板隐藏
panels.forEach(function(panel){
panel.style.display = 'none';
});
//然后根据当前tab标签中的target属性找到当前tab标签对应的面板，然后将其显示状态修改为显示
doc.querySelector(tab.getAttribute('target')).style.display = 'block';
});
});
//初始化时默认点击一下第一个tab标签，用来给一个默认的现实面板。
//你可以试一下，去掉这句话，默认就不显示任何面板了
tabs[0].click();
}(this.document));
<li target="#panel-1">TAB-1</li>
<li target="#panel-2">TAB-2</li>
<li target="#panel-3">TAB-3</li>
</ul>
<div id="panel-1">这是一个好的开始TAB-1</div>
<div id="panel-2">我们开始到这里了TAB-2</div>
<div id="panel-3">不一定要写如此的代码哦TAB-3</div>
JavaScript
(function(doc){
'use strict';
var slice = Array.prototype.slice;
//因为querySelectorAll返回的是一个array like对象，并不是真正的数组，所以我用Array原型上的slice方法将其处理成一个真正的数组，便于后面的forEarch调用
var tabs = slice.call(doc.querySelectorAll('ul li'));
var panels = slice.call(doc.querySelectorAll('div'));
//遍历每一个卡片tab标签，为其增加点击事件监听器
tabs.forEach(function(tab){
tab.addEventListener('click', function(){
//当点击这个tab标签时，先将所有的面板隐藏
panels.forEach(function(panel){
panel.style.display = 'none';
});
//然后根据当前tab标签中的target属性找到当前tab标签对应的面板，然后将其显示状态修改为显示
doc.querySelector(tab.getAttribute('target')).style.display = 'block';
});
});
//初始化时默认点击一下第一个tab标签，用来给一个默认的现实面板。
//你可以试一下，去掉这句话，默认就不显示任何面板了
tabs[0].click();
}(this.document));
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
