问答详情
源自：6-2 使用JS为元素class赋值

JS原生代码去实现网页定位导航问题，滚动时导航不变是什么原因？

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
	<style type="text/css">
	*{margin: 0; padding: 0;}
body{font-size: 12px; line-height: 1.6;}
li{list-style: none;}
#content{width: 800px; margin: 0 auto; padding: 20px;}
#content h1{color: #0088bb;}
#content .item{padding: 20px; margin-bottom: 20px; border: 1px dotted #0088bb;}
#content .item h2{font-size: 16px; font-weight: bold; border-bottom: 2px solid #0088bb; margin-bottom: 10px;}
#content .item li{display: inline; margin-right: 10px;}/*display: inline;让li里的图片依次排列*/
#content .item li a img{width: 234px; height: 234px; border: none;}
#menu{position: fixed; top: 100px; left: 50%; margin-left: 400px; width: 80px;}
/*菜单固定位置不动用fixed,left: 50%是让元素先居中，然后再根据外部div（content）的宽度设置margin-left,这里的400为div宽度的一半*/
#menu ul li a {display: block; margin: 5px 0; font-size: 14px; font-weight: bold; color: #333; width: 80px; height: 50px; line-height: 50px; text-decoration: none; text-align: center;}
#menu ul li a:hover,#menu ul li a.current{color: #fff; background: #0088bb;}
/*IE测试工具：IETrster，，IE6不支持fixed,所以要加上一下代码*/
* html, * html body{background-image: url(about:blank); background-attachment: fixed;}
* html #menu {position: absolute; top: expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop）+ 100'px')；}
	</style>
<script type="text/javascript">
// IE浏览器对getElementByClassName()方法支持较差，解决方法(粗略)：
// 在外面重新写一个方法
function getByClassName(obj,cls){
var elements = obj.getElementsByTagName("*");
var result = [];
for (var i = 0; i < elements.length; i++) {
if (elements[i].className == cls) {
result.push(elements[i]);
}
}
return result;
}

window.onscroll = function(){
var top = document.documentElement ? document.documentElement.scrollTop : document.body.scrollTop;
var menus = document.getElementById("menu").getElementsByTagName("a");
var items = getByClassName(document.getElementById("content"), "item");
var currentId ="";
for(var i = 0; i < items.length;  i++){
var _item = items[i];
var _itemTop = _item.offsetTop;
if (top > _itemTop -200) {
currentId = _item.id;
}else {
break;
}
}
if (currentId) {
// 给焦点a赋样式
for(var j = 0; j < menus.length; j++){
var _menu = menus[j];
var _href = _menu.href.split("#");
if (_href[_href.length-1] != currentId) {
_menu.removeClass("current");
} else{
_menu.addClass("current");
}
}
}
}
</script>

<title>网页定位导航</title>
</head>
<body>
<div id="menu"> <!-- div#menu ctrl+e 生成下列代码 -->
<ul> <!-- ul>li*5>a ctrl+e 生成下列代码 -->
<li><a href="#item1">1F 男装</a></li>
<li><a href="#item2">2F 女装</a></li><!-- #item2现在统一用ID做锚点链接 -->
<li><a href="#item3">3F 没妆</a></li>
<li><a href="#item4">4F 数码</a></li>
<li><a href="#item5">5F 母婴</a></li>
</ul>
</div>
<div id="content">
<h1>聚聚服饰</h1>
<div id="item1">
<h2>1楼男装</h2>
<ul>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
</ul>
</div>
<div id="item2">
<h2>2楼女装</h2>
<ul>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
</ul>
</div>
<div id="item3">
<h2>3楼美妆</h2>
<ul>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
</ul>
</div>
<div id="item4">
<h2>4楼数码</h2>
<ul>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
</ul>
</div>
<div id="item5">
<h2>5楼母婴</h2>
<ul>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
<li><a href="#"><img src="images/1.jpg" alt="..."></a></li>
</ul>
</div>
</div>
</body>
</html>


提问者：蒲公英A月儿 2016-08-05 17:35

个回答

  • 坐地生财
    2016-08-06 11:50:54
    已采纳

    function hasclass(obj,cls){

    return obj.className.match(new Regxp("(\\a|^)"+cls+"(\\a|$)"));

    }

    function removeClass(obj,cls){

    if(hasclass(obj,cls)){

    var reg=new Regxp("(\\a|^)"+cls+"(\\a|$)")

    obj.className=obj.className.relace(reg,"");

    }

    }

    function removeClass(obj,cls){

    if(!hasclass(obj,cls)){

    obj.className+=""+cls;

    }

    }

    0
  • 坐地生财
    2016-08-06 11:23:50

    js原生代码是不能直接用removeClass,和addClass的，应该定义function removeClass(obj,cls){……}和function addClass(obj,cls){……}

    0