                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /網(wǎng)頁定位導航特效

這個語法，用jquery-3.2.1寫報錯求解： menu.find("[href="+currentId+"]").addClass("current");

<!DOCTYPE html>

<html>

<head>

<title>菜狗購物網(wǎng)</title>

<!--

? ? ? ? 作者：306607265@qq.com

? ? ? ? 時間：2017-07-18

? ? ? ? 描述：

? ? ? ? <script type="text/javascript">

//獲取classname的封裝函數(shù)

function getClass(par,cls){

var gro=par.getElementsByTagName("*");

var result=[];

for (i=0;i<gro.length;i++){

if(gro[i].className==cls){

result.push(gro[i]);

}

return result;

}

function hascls(obj,cls){

return? obj.className.match(new RegExp("(\\s|^)"+cls+"(\\s|$)"));

}

function removeclass(obj,cls){

if(hascls(obj,cls)){

var reg=new RegExp("(\\s|^)"+cls+"(\\s|$)")

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

}

function addclass(obj,cls){

if(!hascls(obj,cls)){

obj.className+=""+cls;

}

window.onload=function(){

window.onscroll=function(){

var top= document.documentElement.scrollTop || document.body.scrollTop

console.log(top);

var menus=document.getElementById("menu").getElementsByTagName("a");

var items=getClass(document.getElementById("content"),"item");

var currentid="";

for(i=0;i<items.length;i++){

if(top>items[i].offsetTop-200){

currentid=items[i].id;

}else

break;

}

if(currentid){

for(j=0;j<menus.length;j++){

var _href=menus[j].href.split('#');

if(_href[_href.length-1]==currentid){

addclass(menus[j],"current");

}else{

addclass(menus[j],"current");

removeclass(menus[j],"current");

}

</script>-->

$(document).ready(function(){

$(window).scroll(function(){

var items=$("#content").find(".item");

var menu=$("#menu");

var currentid="";

var top=$(document).scrollTop();

items.each(function(){

if (top > $(this).offset().top - 300) {

? ? ? ? ? ? ? ? ? ? ? ? currentId = "#" + $(this).attr("id");

? ? ? ? ? ? ? ? ? ? ? ? $(".current").removeClass("current");

? ? ? ? ? ? ? ? ? ? ? ? menu.find("[href="+currentId+"]").addClass("current");

? ? ? ? ? ? ? ? ? ? } else {

? ? ? ? ? ? ? ? ? ? ? ? return false;

? ? ? ? ? ? ? ? ? ? }

});

</script>

<style>

* {

? ? ? ? ? ? margin: 0;

? ? ? ? ? ? padding: 0;

? ? ? ? }

? ? ? ? body {

? ? ? ? ? ? font-size: 12px;

? ? ? ? ? ? line-height: 1.7;

? ? ? ? }

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

? ? ? ? }

? ? ? ? #content .item li a img {

? ? ? ? ? ? width: 230px;

? ? ? ? ? ? height: 230px;

? ? ? ? ? ? border: none;

? ? ? ? }

? ? ? ? #menu {

? ? ? ? ? ? position: fixed;

? ? ? ? ? ? top: 100px;

? ? ? ? ? ? left: 50%;

? ? ? ? ? ? margin-left: 400px;

? ? ? ? ? ? width: 50px;

? ? ? ? }

? ? ? ? #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;

? ? ? ? }

</style>

</head>

<body>

<ul >

</ul>

</div>

<h1>菜狗購物網(wǎng)</h1>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</div>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</div>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</div>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</div>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</div>

</body>

</html>

simon_wyk

2017-07-18

源自：網(wǎng)頁定位導航特效 7-1

關注問題我要回答

1255

操作

收起

4 回答

慕粉0905313057
2019-01-16

其實在jQuery1.8以后.size()合并成了length屬性

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

收起回答

套子里的海怪
2017-08-02

var currentid=""; 這里定義的是小寫的i，后面字符串鏈接的時候寫的是大寫I；

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

收起回答

#1

套子里的海怪

仔細研究了一下，發(fā)現(xiàn)是jquery3.2.1版本的不行，用舊版本的吧。

2017-08-02 回復有任何疑惑可以回復我~

白小九
2017-07-28

menu.find("[href="+currentId+"]")這里需要加上單引號：

menu.find("[href='"+currentId+"']")

1 回復有任何疑惑可以回復我~

收起回答

#1

慕尼黑8172991

為啥加上單引號就好了？

2018-01-30 回復有任何疑惑可以回復我~

lilng
2017-07-19

[href="+currentId+"] 是篩選條件，而find查找的是dom節(jié)點，你在前面加一個li就可以了。

即 li[href="+currentId+"]

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

收起回答

#1

simon_wyk 提問者

你好，感謝你的回答，不過加上li[href="+currentId+"]這個后，還是沒有效果，js代碼上報錯了

2017-07-26 回復有任何疑惑可以回復我~

舉報

0/150

提交

取消

網(wǎng)頁定位導航特效

參與學習 71394 人
解答問題 501 個

本課程講解網(wǎng)頁定位導航特效，仿天貓版地狗購物網(wǎng)，你值得擁有

進入課程

本課相似問答

1 回答menu.find([href=+ currentId +]).addClass("current");怎么改？

1 回答menu.find("[href="+currentId+"]").addClass("current");求指教?。?/p>

3 回答menu.find("[href="+currentId+"]").addClass("current");里的[ ]

1 回答var currentLink = menu.find(".current"); if (currentId && currentLink.attr("href") != currentId) { currentLink.removeClass("current"); menu.find("[href=" + currentId + "]").addClass("current");

3 回答menu.find("[href="+currentId+"]").addClass("current");中 [href="+currentId+"]" 為什么要用" [] "號.

搜索更多本課相關問答