Как изменить цвет навигационной ссылки

Question

Я создаю веб-сайт, в котором я использую хэш-тег для разных ссылок, таких как домашний контакт и т. Д., Но я хочу, чтобы моя кнопка навигации меняла цвет на # 03c1cb, когда адрес url описывает специальную вкладку хэша. например, когда url показывает #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 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> 
    <ul> 
    <li>Home</li> 
    <li>Some other page</li> 
    <li>etc...</li> 
    </ul> 
</nav> 

---

После другого взгляда на ваш конкретном случае использования, я думаю, вы можете упростить вещи немного и сделать что-то вроде этого:

Working example

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