总的来说思路比较简单，就是先获取节点，然后对节点进行相应的处理,下面是完整的页面代码：
原生js：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>原生js tab</title>
<style type="text/css">
.tab{
margin:10px auto;
position:relative;
width:300px;
}
ul,li{
list-style-type:none;
padding:0;
margin:0;
font:13px/20px SimSun,arial;
color:#333;
text-align:center;
}
.tabTltle ul li{
float:left;
position:relative;
background:#fefefe;
background:-webkit-gradient(linear,left top,left bottom, from(#fefefe), to(#ededed));
padding:7px 15px;
border:1px #ddd solid;
margin-right:-1px;
cursor:pointer;
}
.tabTltle ul li.active{
background:#fff;
font-weight: bold;
}
.clearfix{
}
.clearfix:after{
display:block;
clear:both;
overflow:hidden;
content:"";
}
.tabConn{
border:1px #eee solid;
position:relative;
height:100px
}
.tabConn div{
position:absolute;
opacity:0;
filter:alpha(opacity=0);
padding:5px;
text-align:center;
width:100%;
}
.tabConn div.current{
opacity:1;
filter:alpha(opacity=100);
}
</style>
</head>
<body>
<div id="tab" class="tab">
<div class="tabTltle">
<ul class="clearfix">
<li class="active">标题一</li>
<li>标题二</li>
<li>标题三</li>
<li>标题四</li>
</ul>
</div>
<div class="tabConn">
<div class="current">aaaaaaaaaaaaaaa</div>
<div>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
<div>cccccccccccccccccccccccccccccccc</div>
<div>ddddddddddddddddddddddddddddd</div>
</div>
</div>
<script type="text/javascript">
(function(){
var tab = document.getElementById("tab");
var tabList = tab.getElementsByTagName("div")[0].getElementsByTagName("li");
var tabConn = tab.getElementsByTagName("div")[1].getElementsByTagName("div");for(var i=0;i<tabList.length;i++){
tabList[i].index = i;
tabList[i].onclick = function(){
showConn(this.index);
}
}
function showConn(_index){
var index = _index;for(var j=0;j<tabList.length;j++){
tabList[j].className = "";
tabConn[j].className = "";
tabConn[j].style.opacity=0;
}
tabConn[index].className="current";
tabList[index].className="active";
}
})();
</script>
</body>
</html>
下面我们来看一下jQuery写的（css共用,需要引进jQuery库）：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>jQuery tab</title> <script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.8.1.min.js">是不是简单了好多！
以上所述就是本文的全部内容了，希望大家能够喜欢。
标签：
原生js,jQuery,选项卡
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
桃源资源网 Design By www.nqtax.com
暂无“原生js和jQuery写的网页选项卡特效对比”评论...