jQuery - 如何在文檔上找到相同的href屬性？

編輯：刪除dev-link！jQuery - 如何在文檔上找到相同的href屬性？

在底部你會看到一個站點地圖導航。如果我將鼠標懸停在底部，那麼它也應該在我的頂部導航欄中突出顯示（addClass）相同的Navpoint。你會看到Links是一樣的。對於exp。有隻有六個...

我寫的「href attr.」上mouseHover到我的變量「aHref」：

$(".psSitemap a").hover(
    function() { 
     var aHref = $(this).attr('href'); 
     console.log(aHref); 

     // addClass 'active' to the comparable Top Navigation Item href is the same! 
    }, function() { 
     // removeClass 'active' at Top Navigation 
    } 
);

但我怎麼能還‘找到’我的文檔可比ahref.attr？

感謝您的幫助。

來源

2015-01-13 user2310852

很高興我能夠幫助你，如果可以簡化懸停功能，我剛剛更新了我對問題的回答（你發佈爲答案）。關於Stackoverflow規則的一些建議 - 你不應該發佈其他問題作爲答案，但你可以將它作爲更新/編輯添加到你原來的問題。當發佈爲答案時，最有可能的其他問題將被標記爲「不是答案」並被刪除。欲瞭解更多信息，你可以檢查http://stackoverflow.com/help/deleted-answers –

對於var aHref = $(this).attr('href');匹配的頂部導航鏈接

$(".full-size a[href='" + aHref + "']")

對於是否有可能寫的函數來改變徘徊在一個簡單的方法站點地圖鏈接匹配topnav鏈接的問題 - 它可以通過減少的toggleClass()而不是添加在兩個單獨的功能去掉類，而不是任何聲明的變量（雖然這可以爲可讀性有用的，它是沒有必要的）：

$(document).ready(function() { 
 
    $(".psSitemap a").hover(
 
    function() { 
 
     $(".full-size a[href='" + $(this).attr('href') + "']").toggleClass('comparable'); 
 
    }); 
 
});

ul { 
 
    list-style-type: none; 
 
} 
 
li { 
 
    display: inline; 
 
} 
 
a { 
 
    color: #000; 
 
} 
 
.comparable { 
 
    background-color: blue; 
 
    color: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul class="full-size"> 
 
    <li><a href="first.html">First</a> 
 

 
    </li> 
 
    <li><a href="second.html">Second</a> 
 

 
    </li> 
 
    <li><a href="third.html">Third</a> 
 

 
    </li> 
 
</ul> 
 
<ul class="psSitemap"> 
 
    <li><a href="first.html">First</a> 
 

 
    </li> 
 
    <li><a href="second.html">Second</a> 
 

 
    </li> 
 
    <li><a href="third.html">Third</a> 
 

 
    </li> 
 
</ul>

來源

2015-01-13 22:57:08

這可能是一個解決辦法：

$(document).ready(function() { 



    $(".psSitemap a").hover(


    function() { 

     // add href from hover pos. 
     var aHref = $(this).attr('href'); 
     // comparable 
     var topNav = $(".full-size a[href='" + aHref + "']"); 


     // addClass 'active' to the comparable Top Navigation Item   
     $(topNav).addClass('comparable'); 



    }, function() { 
     var aHref = $(this).attr('href'); 
     var topNav = $(".full-size a[href='" + aHref + "']"); 

     // removeClass 'active' at Top Navigation 
     $(topNav).removeClass('comparable'); 
    } 
); 





});

馬蒂亞斯感謝您的幫助。它的工作原理，但我認爲我可以寫得更輕鬆？！你怎麼看 ..？

來源

2015-01-14 09:32:18 user2310852

jQuery - 如何在文檔上找到相同的href屬性？

回答

相關問題