Question

您好我正在编写此代码以更改我的导航链接颜色基于网址而不是它运行不正常请帮助我。我想更改该特定网址的导航链接颜色我的js代码

function big(x){

x.style.fontSize = "17px";
x.style.color="#03c1cb";
}
function small(x){
var y=location.hash;
if(x.href== y){
x.style.fontSize = "17px";
x.style.color="#03c1cb";
}
else{
x.style.color = "white";
x.style.fontSize ="15px";
}
}

和

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
$(document).ready(function () {
    $(".scroll").click(function (e) {
        e.preventDefault();
        var section = this.href,
            sectionClean = section.substring(section.indexOf("#"));

        $("html, body").animate({
            scrollTop: $j(sectionClean).offset().top
        }, 1000, function () {
            window.location.hash = sectionClean;
        });

    });
});
// listen for the scroll event
    $(document).on("scroll", function() {
      console.log("onscroll event fired...");
      // check if the anchor elements are visible
      $(".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);
          }
        }
      });
    });

我的html代码是

<a href="#home" id="start1" class="scroll" 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>

请帮帮我

Answer 1

您将href颜色设为白色，因此不可见。将背景颜色更改为深色

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

  <style>
     body {background-color:lightgray}
  </style>
</head>
<body>
   <a href="#home" id="start1" class="scroll" 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>
<script>
   function big(x){
     console.log(x.id);
     var x = document.getElementById(x.id);
   x.style.fontSize = "17px";
   x.style.color="#03c1cb";
   }
   function small(x){
   var y=location.hash;
   if(x.href== y){
   x.style.fontSize = "17px";
   x.style.color="#03c1cb";
   }
   else{
   x.style.color = "white";
   x.style.fontSize ="15px";
   }
 }
   </script>
</body>
</html>

为什么导航颜色不变

1 个答案: