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;}
添加回答
举报
0/150
提交
取消