请大神帮我解答
慕慕5671631
2017-04-04 23:42
我在做一个网页，想用到选项卡
效果图：
代码是：
<div class="menu">
<ul>
<li><a href="#pic" id="current" >相册</a></li>
<li><a href="#video">视频</a></li>
<li><a href="#message">动态</a></li>
</ul>
</div>
<div class="boxmain">
<div class="pic clearfix">
<div >123</div>
<div>123</div>
</div>
<div class="video clearfix">
<div>456</div>
<div>456</div>
</div>
<div class="message clearfix">
<div>789</div>
<div>789</div>
</div>
</div>
就是链接对应的每个div里面，又有很多的div,该怎么修改js才能实现选项卡的效果。
附上视频里的js代码：
function $(id){
return typeof id==='string'?document.getElementById(id):id;
}
window.onload=function(){
//获取鼠标滑过或点过的标签和要切换的内容的元素
var titles=$('notice-tit').getElementsByTagName('li');
divs=$('notice-con').getElementsByTagName('div');
if(titles.length!=divs.length)
return;
//遍历title下的所有li
for var i=0;i<titles.length;i++){
titles[i].id=i;
titles[i].onclick=function(){
//清楚所有li上的class
for(var j=0;j<titles.length;j++){
titles[j].className='';
divs[j].style.display='none';
}
//设置当前为高亮显
this.className='select';
divs[this.id].style.display='block';
}
}
}
请大神求救，1回答
-
- startitunderground
- 2017-04-06 15:56:41
function getId(id){
return typeof id==="string"?document.getElementById(id):id;
};
window.addEventListener("load",function(){
//获取鼠标滑过或点击的标签和要切换的内容的元素
var navList=getId("nav").getElementsByTagName("li");
var contentList=getId("content").getElementsByTagName("div");
// alert(navList.length);alert(contentList.length);
//导航分页li标签的索引
var pointer=0;
//timer为定时器
var timer=null;
if (navList.length!=contentList.length) {
return ;
}
//遍历navList下的所有的li标签
for(var i=0;i<navList.length;i++){
// 自定义添加的id属性,设置索引
//navList[i].id=i;
//var index=navList[i].getAttribute("index");
navList[i].addEventListener("mouseover",function(event){
//这也是一种获取索引的方式,通过获取自定义的index的值
//alert(this.getAttribute("index"));
//如果存在准备执行的定时器，则立刻清除,只有当前停留时间超过500ms时执行
if(timer){
clearTimeout(timer);
timer=null;
};
//用that来引用当前滑过的li
var that=this;
//alert(that);
//延迟500ms执行
timer=setTimeout(function(){
for(var j=0;j<navList.length;j++){
navList[j].className="";
contentList[j].style.display="none";
};
that.className="select";
contentList[that.getAttribute("index")-1].style.display="block";
},400);
},false);
}
},false);
Tab选项卡切换效果
65466 学习 · 575 问题
相似问题