突出显示当前与CSS或js的链接 [英] Highlight current link with CSS or js

问题描述

我突出打开的链接有一个小问题。所以我想要的：
如果页面加载，它会打开足球（链接）类别：

 < script type = 文本/ JavaScript的 > 
 var x = location.hash.replace（＃，）; 
 if（x ===）{
 window.location.href =#football; 
} 
< / script> 
  

我想在页面加载（改变当前链接的颜色）时自动突出显示此类别。 （某人）点击其他类别（链接）后，突出显示当前类别。例如其他链接具有其他颜色。这是页面上更好的方向所必需的。我在这里创建了JSFiddle示例 。

解决方案

我相信这是你需要的：

在当前类别的文档加载上设置颜色：

  $（'＃link-'+ hashStr）.css（{
'color'：'red'
}）; 
  

改变类别上的颜色点击：

  $（'。nav1'）。css（{'color'：'black'}）; 
 $（'＃link-'+ hashStr）.css（{'color'：'red'}）; 
  

请注意，我更新了其中一个导航链接，因此它们都具有相同的类别：

 < li>< a class =nav1data-tab =＃hockeyid =link-hockeyhref = #hockey>曲棍球< / A>< /锂> b 
 
 
 $ b 
 nofollow>更新小提琴 
 
I have small problem with highlight opened link. So what I want:
If page load, it open football (link) category:
<script type="text/javascript">
       var x = location.hash.replace("#", "");
       if (x===""){
         window.location.href = "#football";
        }
</script>
And I want to highlight this category automatically when page load (change color of this current link). And after (someone) click on other category (link) highlight this current category. For example with other color as other links have. It is needed for better orientation on page. I created JSFiddle example here.
解决方案
I believe this is what you need:

set color on document load for current category:
$('#link-' + hashStr).css({
     'color': 'red'
});
change color on category click:
$('.nav1').css({'color': 'black'});
$('#link-' + hashStr).css({'color': 'red'});
note that i updated one of the nav links so they all have the same class:
<li><a class="nav1" data-tab="#hockey" id="link-hockey"href="#hockey">Hockey</a></li>
updated fiddle

                        
这篇关于突出显示当前与CSS或js的链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！