如何更改导航链接的颜色

Question

我正在创建一个网站，其中我使用哈希标记为不同的链接，如家庭联系等，但我希望我的导航按钮应改变颜色＃03c1cb当url的地址描述一个特定的哈希标签。例如，当url显示#home时，带有home的颜色的链接应该改变，链接的其余部分应该有白色。与其他链接类似。请帮助我如何做。我正在定位我的代码。我的HTML代码

<span><a href="#home" id="start1" class="navlink" style="text-decoration:none;position:absolute;right:450px;top:37px;font-weight:bold;color:white;font-size:15px;z-index:200;transition:0.5s" onmouseover="big(this)" onmouseout="small(this)">HOME</a></span> 
<span><a href="#products" id="start2" class="navlink" style="text-decoration:none;position:absolute;right:250px;top:37px;font-weight:bold;color:white;font-size:15px;transition:0.5s" onmouseover="big(this)" onmouseout="small(this)">PRODUCTS & SERVICES</a></span> 
<span><a href="#about" id="start3" class="navlink" style="text-decoration:none;position:absolute;right:140px;top:37px;font-weight:bold;color:white;font-size:15px;transition:0.5s" onmouseover="big(this)" onmouseout="small(this)">ABOUT US</a></span> 
<span><a href="#contacts" id="start4" class="navlink" style="text-decoration:none;position:absolute;right:20px;top:37px;font-weight:bold;color:white;font-size:15px;transition:0.5s" onmouseover="big(this)" onmouseout="small(this)">CONTACT US</a></span> 
</p> 

和我的js代码是

function isElementInViewport (el) { 
     //special bonus for those using jQuery 
     if (typeof jQuery === "function" && el instanceof jQuery) { 
     el = el[0]; 
     } 
     var rect = el.getBoundingClientRect(); 
     return (
     rect.top >= 0 && 
     rect.left >= 0 && 
     rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $j(window).height() */ 
     rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $j(window).width() */ 
    ); 
    } 

// url change on clicking 
$j(document).ready(function() { 
    $j("#start1,#start2,#start3,#start4,#start5,#start6").click(function (e) { 
     e.preventDefault(); 
     var section = this.href, 
      sectionClean = section.substring(section.indexOf("#")); 

     $j("html, body").animate({ 
      scrollTop: $j(sectionClean).offset().top 
     }, 1000, function() { 
      window.location.hash = sectionClean; 
     }); 
    }); 
}); 
// listen for the scroll event 
    $j(document).on("scroll", function() { 
     console.log("onscroll event fired..."); 
     // check if the anchor elements are visible 
     $j(".anchor").each(function (idx, el) { 
     if (isElementInViewport(el)) { 
      // update the URL hash 
      if (window.history.pushState) { 
      var urlHash = "#" + $j(el).attr("id"); 
      window.history.pushState(null, null, urlHash); 
      } 
     } 
     }); 
    }); 
function big(x){ 

x.style.fontSize = "17px"; 
x.style.color="#03c1cb"; 
} 
function small(x){ 

x.style.fontSize = "15px"; 
x.style.color="white"; 

} 

请帮我该怎么办？

Answer 1

尝试这样的事情......

<style> 
.[ELEMENT].active{ 
    color: [COLOR]; 
} 
</style> 

Answer 2

所以真的是你想知道的是如何改变标签的颜色。

退房的链接到我的jsfiddle： http://jsfiddle.net/ProgrammerKid/h892vs59/1/

在HTML我有：

<a href="home.html">Home</a> 
<a href="about.html">About</a> 
<a href="contact.html">Contact Us</a> 

，并在CSS你真正需要做的就是删除默认的文饰，浏览器

a { 
    text-decoration: none 
} 

，并为所有其他链接：

通过使用

a[href="home.html"] { 
    color: green; 
} 

a[href="about.html"] { 
    color: green; 
} 

a[href="contact.html"] { 
    color: green; 
} 

什么一[HREF =“page.html中”]所做的就是检查每个元素，只有风格，链接到“page.html中”的元素......这样a[href="home.html"]只会寻找<a href="home.html">Anything can go here</a>

Answer 3

这里是我如何做到这一点在我的网站：

<nav> 
    <ul> 
    <li>Home</li> 
    <li>Some other page</li> 
    <li>etc...</li> 
    </ul> 
</nav> 

---

：

$('nav a').each(function() { // for each anchor in nav 
    if ($(this).attr('href') == window.location.toString()) { // if the anchor's href equals the windows location (converted to string) 
     $(this).parents('li').addClass('active'); //add a class to the anchor's parent list item 
    } 
}); 

这将在一个更为典型的成立一个工作NAV 10

我们再看一下你的具体使用情况后，我觉得你这样事情就简单了一下，做这样的事情：

Working example

$('a').click(function() { 
    $(this).addClass('active'); 
    $(this).parent().siblings().children().removeClass('active'); 
});