为了账号安全,请及时绑定邮箱和手机立即绑定

请大神帮我解答


我在做一个网页,想用到选项卡

效果图:http://img1.sycdn.imooc.com//58e3bc1e0001b38d02410056.jpg

代码是:

<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 回答


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);


0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

请大神帮我解答

我要回答 关注问题
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号