猿问

效果未出!!!

function hasClass( obj, cls ){
       return obj.className.match(new RegExp("(^|\\s+)" + cls + "(\\s+|$)"));
   }

   function removeClass( obj, cls ){
       if( hasClass( obj, cls )){
           //remove
           var reg = new RegExp("(^|\\s+)" + cls + "(\\s+|$)");
           obj.className = obj.className.replace(reg, "");
       }
   }

   //定义getByClassName函数,让函数实现给对象增加class
   function addClass(obj, cls){
       if(!hasClass(obj, cls)){
           obj.className += " " + cls;
       }
   }
//    电梯效果
   window.onscroll=function(){
       //判断是否为获得滚动条顶部
       var top=document.documentElement ? document.documentElement.scrollTop: document.body.scrollTop;
        var menus=document.getElementById("menu").getElementsByTagName("a");
       var mains=document.getElementById("list").getElementsByClassName("main");
       //获得JQery楼层所在的ID
       var currentId="";
       for(var i=0;i<mains.length;i++){
           var _mains=mains[i];
           var _mainsTop=_mains.offsetTop;
           if(top>_mainsTop){
               currentId=_mains.id;
           }else{
               break;
           }
       }
       if(currentId){
       //    给正确的menu下的A元素class赋值
           for(var j=0;j<menus.length;j++){
               var _menus= menus[j];
               var _href=_menus.href.split("#");
               if(_href[_href.length-1] != currentId){
                   removeClass(_menus, "current");
               }
               else{
                   addClass(_menus, "current");
               }
           }
       }
   }




HTML:


<div class="current">
   <div class="item" id="item1">
       <h2>
           求职目标
           <span id="applyjob"></span>
       </h2>
       <p>
           这里需要填写内容这里需要填写内容这里需要填写内容这里需要填写内容
           这里需要填写内容这里需要填写内容这里需要填写内容这里需要填写内容
           这里需要填写内容这里需要填写内容这里需要填写内容这里需要填写内容
           这里需要填写内容这里需要填写内容这里需要填写内容这里需要填写内容
           这里需要填写内容这里需要填写内容这里需要填写内容这里需要填写内容
           这里需要填写内容这里需要填写内容这里需要填写内容这里需要填写内容
           这里需要填写内容这里需要填写内容这里需要填写内容这里需要填写内容
           这里需要填写内容这里需要填写内容这里需要填写内容这里需要填写内容
       </p>

   </div>
   <div class="item" id="item2">
       <h2>
           背景教育
           <span id="education"></span>
       </h2>
       <p>
           这里需要填写内容这里需要填写内容这里需要填写内容这里需要填写内容
           这里需要填写内容这里需要填写内容这里需要填写内容这里需要填写内容
           这里需要填写内容这里需要填写内容这里需要填写内容这里需要填写内容
           这里需要填写内容这里需要填写内容这里需要填写内容这里需要填写内容
           这里需要填写内容这里需要填写内容这里需要填写内容这里需要填写内容
           这里需要填写内容这里需要填写内容这里需要填写内容这里需要填写内容
           这里需要填写内容这里需要填写内容这里需要填写内容这里需要填写内容
           这里需要填写内容这里需要填写内容这里需要填写内容这里需要填写内容
       </p>

   </div>
   <div class="item" id="item3">
       <h2>
           工作经验
           <span id="experience"></span>
       </h2>
       <p>
           这里需要填写内容这里需要填写内容这里需要填写内容这里需要填写内容
           这里需要填写内容这里需要填写内容这里需要填写内容这里需要填写内容
           这里需要填写内容这里需要填写内容这里需要填写内容这里需要填写内容
           这里需要填写内容这里需要填写内容这里需要填写内容这里需要填写内容
           这里需要填写内容这里需要填写内容这里需要填写内容这里需要填写内容
           这里需要填写内容这里需要填写内容这里需要填写内容这里需要填写内容
           这里需要填写内容这里需要填写内容这里需要填写内容这里需要填写内容
           这里需要填写内容这里需要填写内容这里需要填写内容这里需要填写内容
       </p>

   </div>
   <div class="item" id="item4">
       <h2>
           自我评价
           <span id="appraise"></span>
       </h2>
       <p>
           这里需要填写内容这里需要填写内容这里需要填写内容这里需要填写内容
           这里需要填写内容这里需要填写内容这里需要填写内容这里需要填写内容
           这里需要填写内容这里需要填写内容这里需要填写内容这里需要填写内容
           这里需要填写内容这里需要填写内容这里需要填写内容这里需要填写内容
           这里需要填写内容这里需要填写内容这里需要填写内容这里需要填写内容
           这里需要填写内容这里需要填写内容这里需要填写内容这里需要填写内容
           这里需要填写内容这里需要填写内容这里需要填写内容这里需要填写内容
           这里需要填写内容这里需要填写内容这里需要填写内容这里需要填写内容
       </p>

   </div>
   <div class="item" id="item5" >
       <h2>
           技能证书
           <span id="technical"></span>
       </h2>
       <p>
           这里需要填写内容这里需要填写内容这里需要填写内容这里需要填写内容
           这里需要填写内容这里需要填写内容这里需要填写内容这里需要填写内容
           这里需要填写内容这里需要填写内容这里需要填写内容这里需要填写内容
           这里需要填写内容这里需要填写内容这里需要填写内容这里需要填写内容
           这里需要填写内容这里需要填写内容这里需要填写内容这里需要填写内容
           这里需要填写内容这里需要填写内容这里需要填写内容这里需要填写内容
           这里需要填写内容这里需要填写内容这里需要填写内容这里需要填写内容
           这里需要填写内容这里需要填写内容这里需要填写内容这里需要填写内容
       </p>

   </div>

</div>


css:

.list{
   margin: 0 25px;
   overflow: hidden;
   position: relative;
}



.main h2{
   float: left;
   font-size: 30px;
   font-weight: bold;
}

.main span{
   float: right;
   border-bottom: 5px solid #0088bb;
   width: 263px;
   height: 10px;
   display: block;
   margin-left: 25px;
}

.main p{
   display: block;
   line-height: 25px;

}

.menu{
   position: fixed;
   top: 100px;
   left: 50%;
   margin-left:343px;
}


.menu ul li a{
   display: block;
   width: 50px;
   height: 30px;
   line-height: 30px;
   font-size: 14px;
   font-weight: bold;
   padding: 10px;
   text-decoration: none;
   text-align: center;
   color: #1E323B;
}

.menu ul li a:hover,
.menu ul li a.current{
   color: #FFF;
   background: #1E323B;
}



19990000
浏览 1117回答 1
1回答

李晓健

有问题请帖代码,不要帖图片
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答