如何更改导航链接的颜色

Question

i am creating a website in which i am using hash tag for different links such as home contact etc. but i want that my navigation button should change color to #03c1cb when the address of url describes a particular hash tab. for eg when url shows #home ,the link with name home's color should change and rest of the link should have white color. Similarly with rest of the links. Please help me how to do.I am positing my code. My html code is

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

and my js code is

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";

}

please help me how to do ?

Answer 1

try something like this...

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

Answer 2

So really what you want to know is how to change color of an tag.

Check out the link to my JSFiddle: http://jsfiddle.net/ProgrammerKid/h892vs59/1/

In the html I have:

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

and in the CSS all you really have to do is remove the default text decoration that the browser uses by:

a {
    text-decoration: none
}

and for all the other links:

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

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

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

what the a[href="page.html"] does is it check each element, and only styles the element that link to the "page.html"... so a[href="home.html"] will only look for <a href="home.html">Anything can go here</a>

Answer 3

Here is how I do it on my site:

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

This will work for a nav set up in a more typical:

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

---

After taking another look at your specific use case I think you can simplify things a bit and do something like this:

Working example

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