当前锚具有不同的颜色和卷轴？

-4

我很好奇如何将当前锚href元素设置为与其他人不同的颜色。当前锚具有不同的颜色和卷轴？

因此，基本上如果有一个href的#home元素，当前锚点是#home，那么它应该是红色的，其他的应该是白色的。

我宁愿用HTML，CSS，jQuery，JavaScript来做这件事。

锚点也必须滚动到正确的元素。

在此先感谢， Blazzike。

来源

2016-07-25 Blazzike

堆栈溢出旨在帮助人们在完成他们的努力之后使用他们的代码。询问谷歌或稍后尝试自己的东西后来。 – actimel

我一直在环顾四周，我只是找不到与锚有关的答案我找到的所有答案都指向单独的页面。我确实有权访问服务器端，但我看不出如何提供帮助。 – Blazzike

如果网址发生变化，您可以使用'window.location.pathname'离开，并使用一些字符串操作来获取id。 –

我想你在寻找CSS :target()选择器。

你可以找到更多有关细节在这里： http://www.w3schools.com/cssref/sel_target.asp

希望这是你所期待的。 ;）

来源

2016-07-25 20:33:00 KillianC

感谢您的回复。 :) 我目前使用“：目标（）选择器”，但我不能让它滚动到一个元素，而使用它，如果我尝试它会滚动到我刚刚点击的元素。也许我做得不对？ – Blazzike

你没有提到滚动，是吗？如果你没有，用更清晰的问题和标题创建另一个主题。 :) – KillianC

JS是你的解决方案... http://www.w3schools.com/jsref/prop_element_scrolltop.asp – KillianC

你可以像下面这样做

HTML

<a href="#" id="anchor1" class="selected">Anchor 1</a> 
<a href="#" id="anchor2" class="noSelected">Anchor 2</a>

CSS

.selected { 
    color:red; 
    text-decoration:none; 
} 

.noSelected { 
    color:blue; 
    text-decoration:none; 
}

jQuery的

$(document).ready(function() { 
       var selected = "anchor1"; 
     $("#anchor1").click(
      function() { 
       if (selected == "anchor2"){ 
        $("#anchor2").removeClass("selected"); 
        $("#anchor1").removeClass("noSelected"); 
        $("#anchor2").addClass("noSelected"); 
        $("#anchor1").addClass("selected"); 
        selected = "anchor1"; 
       } 
      }    
     ); 

     $("#anchor2").click(
      function() { 
       if (selected == "anchor1"){ 
        $("#anchor1").removeClass("selected"); 
        $("#anchor2").removeClass("noSelected"); 
        $("#anchor1").addClass("noSelected"); 
        $("#anchor2").addClass("selected"); 
        selected = "anchor2"; 
       } 
      }    
     ); 
    });

这里的工作fiddle

来源

2016-07-25 20:50:40 CardCaptor

当前锚具有不同的颜色和卷轴？

回答

相关问题