Question

我正在创建一个网站，我在其中使用哈希标记用于不同的链接，例如家庭联系等。但我希望当url的地址描述特定的哈希选项卡时，我的导航按钮应该将颜色更改为＃03c1cb。例如，当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;
}

a [href =“page.html”]的作用是检查每个元素，并仅设置链接到“page.html”的元素的样式...所以a[href="home.html"]只会查找{ {1}}

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

如何改变导航链接的颜色

3 个答案: