版权声明：转载请先告知哦 https://blog.csdn.net/PINK789/article/details/88382125
最简单的点击谁显示谁选项卡
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{margin:0;padding:0;}li{list-style:none;}
#container{width:600px;margin: 0 auto;}
#nav_wrap{width: 600px;display: flex;justify-content: space-between;border:1px #000 solid;}
#nav_wrap li{flex:1;text-align: center;}
#nr_wrap li{width: 600px;height:300px;text-align: center;line-height: 300px; border:1px #000 solid;display: none;}
.active{background-color: red;}
.block{display: block !important;}
</style>
</head>
<body>
<div id="container">
<ul id="nav_wrap">
<li class="active">栏目一</li>
<li class="">栏目二</li>
<li class="">栏目三</li>
</ul>
<ul id="nr_wrap">
<li class="block">内容一</li>
<li>内容二</li>
<li>内容三</li>
</ul>
</div>
<script type="text/javascript">
var nav_wrap = document.querySelector("#nav_wrap");
var nav_items = nav_wrap.querySelectorAll("li");
var nr_wrap = document.querySelector("#nr_wrap");
var nr_items = nr_wrap.querySelectorAll("li");
var len = nav_items.length;
//for 循环给每个li添加index值,并且绑定函数
for(var i=0;i<len;i++){
nav_items[i].index = i;
nr_items[i].index = i;
nav_items[i].onclick = function(){
tab_change(this.index)
}
console.log("1");
}
function tab_change(num){
//循环去掉每个nav_item 和nr_item的class
for(var i=0;i<len;i++){
nav_items[i].className="";
nr_items[i].className=""
}
nav_items[num].className="active";
nr_items[num].className="block"
}
</script>
</body>
</html>
定时切换，内容区mouseover时清除定时器，内容区mouseout时调用定时器
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
#container{width:600px;margin: 0 auto;}
li{list-style:none;}
#nav_wrap{width: 600px;display: flex;justify-content: space-between;border:1px #000 solid;}
#nav_wrap li{flex:1;text-align: center;}
#nr_wrap li{width: 600px;height:300px;text-align: center;line-height: 300px; border:1px #000 solid;display: none;}
.active{background-color: red;}
.block{display: block !important;}
.nr_item{background-color: red;}
</style>
</head>
<body>
<div id="container">
<ul id="nav_wrap">
<li class="nav_item active">栏目一</li>
<li class="nav_item">栏目二</li>
<li class="nav_item">栏目三</li>
</ul>
<ul id="nr_wrap">
<li class="nr_item block">内容一</li>
<li class="nr_item">内容二</li>
<li class="nr_item">内容三</li>
</ul>
</div>
<script type="text/javascript">
{
var nav_wrap = document.querySelector("#nav_wrap");
var nav_items = nav_wrap.querySelectorAll("li");
var nr_wrap = document.querySelector("#nr_wrap");
var nr_items = nr_wrap.querySelectorAll("li");
var len = nav_items.length;
var timer = null; //定时器
var num = 0; //用于计数
//for 循环给每个li添加index值,并且绑定函数
for(var i=0;i<len;i++){
nav_items[i].index = i;
nr_items[i].index = i;
nav_items[i].onclick = function(){
tab_change(this.index)
}
//导航li发生点击事件时，清除定时器并且显示点击的导航li索引值一样的内容 li
nav_items[i].onclick = function(){
clearInterval(timer);
num = this.index;
tab_change(num)
}
//内容li发生mouseover事件时，清除定时器
nr_items[i].onmouseover = function(){
clearInterval(timer);
num = this.index;
tab_change(num);
}
//内容li发生mouseout事件，调用定时器，同时传给定时器当前的num值
nr_items[i].onmouseout = function(){
num = this.index;
autoplay(num);
}
}
function tab_change(num){
//循环去掉每个nav_item 和nr_item的class
for(var i=0;i<len;i++){
modifyClassName(nav_items[i],"active");
modifyClassName(nr_items[i],"block");
}
nav_items[num].className = nav_items[num].className+" active";
nr_items[num].className = nr_items[num].className+" block"
}
function autoplay(){
timer = setInterval(function(){
num++;
// console.log(num)
if(num>=len){
num = 0;
};
tab_change(num);
},1000)
}
autoplay()
}
//封装的函数用于删除指定类名
function modifyClassName(ele,deleteClassName,addClassName){
var newClassNames; //删除旧的类名，添加新类名后的数字符串
// 获取参数元素类名，并使用字符串方法将获取到的类名字符串封装，此处注意复习正则表达式
var classNames = ele.className.split(/\s+/g);
//在类名数组中找要删除的元素位置
var position = classNames.indexOf(deleteClassName);
//排除没有要删除的类名的情况
if(position>0){
classNames.splice(position,1);
}
//避免参数三为空
if(addClassName === undefined){
classNamesNew = classNames.join(" ");
} else {
classNamesNew = classNames.join(" ")+ " " + addClassName ;
}
ele.className = classNamesNew;
}
</script>
</body>
</html>