2015-01-13 24 views
0

编辑:删除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?

感谢您的帮助。

+0

很高兴我能够帮助你,如果可以简化悬停功能,我刚刚更新了我对问题的回答(你发布为答案)。关于Stackoverflow规则的一些建议 - 你不应该发布其他问题作为答案,但你可以将它作为更新/编辑添加到你原来的问题。当发布为答案时,最有可能的其他问题将被标记为“不是答案”并被删除。欲了解更多信息,你可以检查http://stackoverflow.com/help/deleted-answers –

回答

1

对于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>

0

这可能是一个解决办法:

$(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'); 
    } 
); 





}); 

马蒂亚斯感谢您的帮助。它的工作原理,但我认为我可以写得更轻松?!你怎么看 ..?

相关问题