Javascript 功能阻止菜单锚链接工作

Question

您好，我的菜单 links 无法连接到其他网页。我很确定我的 javascript 功能之一导致这些菜单 link 无法工作，但我不确定如何解决这个问题。

我添加了一个功能，可以在每个菜单下创建一个菜单下划线。所以如果我不得不猜测这可能是导致问题的原因。如果您点击下面的 link，您可以实时查看该网站。

// ============= MENU HOVER UNDERLINE EFFECT - START =================

//  Menu Underline Function - START

(function() {

  const target = document.querySelector(".target");
  const links = document.querySelectorAll(".mynav a");
  const colors = ["#f7c51e"];
  // const colors = ["deepskyblue", "orange", "firebrick", "gold", "magenta", "black", "darkblue"];

  function mouseenterFunc() {
    if (!this.parentNode.classList.contains("active")) {
      for (let i = 0; i < links.length; i++) {
        if (links[i].parentNode.classList.contains("active")) {
          links[i].parentNode.classList.remove("active");
        }
        // links[i].style.opacity = "0.25";
      }

      this.parentNode.classList.add("active");
      this.style.opacity = "1";

      const width = this.getBoundingClientRect().width;
      const height = this.getBoundingClientRect().height;
      const left = this.getBoundingClientRect().left + window.pageXOffset;
      const top = this.getBoundingClientRect().top + window.pageYOffset;
      const color = colors[Math.floor(Math.random() * colors.length)];

      target.style.width = `${width}px`;
      target.style.height = `${height}px`;
      target.style.left = `${left}px`;
      target.style.top = `${top}px`;
      target.style.borderColor = color;
      target.style.transform = "none";
    }
  }

  for (let i = 0; i < links.length; i++) {
    links[i].addEventListener("click", (e) => e.preventDefault());
    links[i].addEventListener("mouseenter", mouseenterFunc);
  }

  function resizeFunc() {
    const active = document.querySelector(" .mynav li.active");

    if (active) {
      const left = active.getBoundingClientRect().left + window.pageXOffset;
      const top = active.getBoundingClientRect().top + window.pageYOffset;

      target.style.left = `${left}px`;
      target.style.top = `${top}px`;
    }
  }

  window.addEventListener("resize", resizeFunc);


// Event Listener To Remove Line From Floating in Air When Leaving Dropdown Box - START

document.querySelector(".mynav").addEventListener("mouseleave", function() {
  target.removeAttribute("style");
})
  
// Event Listener To Remove Line From Floating in Air When Leaving Dropdown Box - END

})();

// ============= MENU HOVER UNDERLINE EFFECT - END =================


// ============= Add "Responsive" Class  When Click On "Menu Click Here" Hamburger - Menu Dropdown =================


function myFunction() {
  var x = document.getElementById("mybottomnav");
  if(x.classList.contains("responsive")) {
    x.classList.remove("responsive");
  } else {
    x.classList.add("responsive");
  }
}


// // This code has an error - It removes the sticky in mobile view
// function myFunction() {
//     var x = document.getElementById("mybottomnav");
//     if (x.className === "bottomnav") {
//       x.className += " responsive";
//     } else {
//       x.className = "bottomnav";
//     }
//   }




// ============= WHITE NAVBAR STICKY =================


// When the user scrolls the page, execute myFunction
window.onscroll = function() {stickyFunction()};

// Get the navbar
var navbar = document.getElementById("mybottomnav");

// Get the offset position of the navbar
var sticky = mybottomnav.offsetTop;

// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function stickyFunction() {
  if (window.pageYOffset >= sticky) {
    mybottomnav.classList.add("sticky")
  } else {
    mybottomnav.classList.remove("sticky");
  }
}


// Fixed White Navbar Sticky Dropdown To Work on Mobile.


// function fixed_top_menu() {
//   var windows = $(window);
//   windows.on("scroll", function () {
//       var header_height = $(".bottomnav").height();
//       var scrollTop = windows.scrollTop();
//       if (scrollTop > header_height) {
//           $(".bottomnav").addClass("sticky");
//       } else {
//           $(".bottomnav").removeClass("sticky");
//       }
//   });
// }
// fixed_top_menu();

@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700,900&display=swap');


/* 
YELLOW - #f7c51e
GREY - #363636
background white - #f6f6f6

*/



* {
    box-sizing: border-box;
    margin: 0; 
    padding: 0;
}


.color-overlay-container {
    justify-content: center;
    align-items: center;
    position: relative;
}

.color-overlay {
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .5;
    z-index: 2;
    position: absolute;
}


.btn-black{
    padding: 1.5rem 2rem;
    color: white;
    background: black;
    text-transform: uppercase;
    font-weight: 900;
}

.btn-yellow{
    padding: 1.5rem 2rem;
    color:  white;
    background: #f7c51e;
    text-transform: uppercase;
    font-weight: 900;
}


body {
    font-family: 'Roboto', sans-serif;
    line-height: 1.4;
}

a {
    text-decoration: none;
}


p {
    margin: .5rem 0;
}

/* Utility Classes */

/* Grid Container */


.grid-container {
display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
  margin: auto;
  grid-auto-rows: minmax(200px, auto);
}

.grid-container-2 {
    display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1rem;
  margin: auto;
}

.card {
    background: #fff;
    padding: 1rem;
}


/* Grid Container - END */


.container {
    max-width: 1404px;
    margin: auto;
    padding: 0 2rem;
    overflow: hidden;
}


.text-center {
    text-align: center;
}


.text-yellow {
    color: #f7c51e;
}

.bg-yellow {
    background: #f7c51e;
    color: black;
}

.bg-grey {
    background: #f9f9f9;
    color: black;
}

.bg-black {
    background:black;
    color: white;
}


.l-heading {
    font-weight: bold;
    font-size: 4rem;
    margin-bottom: 0.75rem;
    line-height: 1.1;
}

.m-heading {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    line-height: 1.1;
}

.lead {
    font-size: 1.3rem;
    margin: 0.75rem 0;
}



/* Padding */

.py-1 {
    padding: 1.5rem 0;
}

.py-2 {
    padding: 2rem 0;
}

.py-3 {
    padding: 3rem 0;
}


/* All Around Padding */

.p-1 {
    padding: 1.5rem;
}

.p-2 {
    padding: 2rem;
}

.p-3 {
    padding: 3rem;
}


/* Utility Classes - END */



/* ================  HOME PAGE ==================== */


/* HEADER */



.site-header {
    background-color: transparent;
}

.site-header .header-container {
    background: black;
    color: white;
}

/* BLACK BAR */

.site-header .header-container .header-container_wrap {
    padding: 30px 5px;
    /* background: red; */
}

#masthead .header-container .header-container_wrap .items {
    display: flex;
    justify-content: center;
}

#masthead .header-container .header-container_wrap .items .contact-info {
    display: flex;

}

#masthead .header-container .header-container_wrap .items .quality-logo {
    margin-right: 3rem;
    line-height: 5px;
}

#masthead .header-container .header-container_wrap .items .quality-logo p {
    font-size: 14px;
    line-height: 1.5;
}


#masthead .header-container .header-container_wrap .items .item {
    display: flex;
    align-items: center;
    margin-right: 1rem;
}


#masthead .header-container .header-container_wrap .items .item {
    display: flex;
    align-items: center;
    margin-right: 1rem;
}
/* 
#masthead .header-container .header-container_wrap .items .item .facebook-like {
    text-align: center;
    color: white;
    background-color: black;
} */

#masthead .header-container .header-container_wrap .items .item .facebook-like {
    text-align: center;
    background-color: black; /* Blue background */
  border: none; /* Remove borders */
  color: white; /* White text */
  padding: none; /* Some padding */
  font-size: 16px; /* Set a font size */
  cursor: pointer; /* Mouse pointer on hover */
}

#masthead .header-container .header-container_wrap .items .item .facebook-like:hover {
   
/* Darker background on mouse-over */

    color: #f7c51e;
  
}



#masthead .header-container .header-container_wrap .items .item .fas  {
    font-size: 18px;
    color: #f7c51e;
    margin-right: 1.5rem;
}


#masthead .header-container .header-container_wrap .items .contact-info .item .fas  {
    font-size: 18px;
    color: #f7c51e;
    margin-right: 1.5rem;
    background: black;
    border-radius: 50%;
    padding: 10px;
    border: 1px solid #363636;
}

/* ========================== Bottom White Header Menu  - START ================ */


/* Menu Underline */


.mynav a {
    display: block;
    font-size: 20px;
    color: black;
    text-decoration: none;
    padding: 7px 15px;
  }
  
  .target {
    position: absolute;
    border-bottom: 4px solid transparent;
    z-index: 100;
    transform: translateX(-60px);
    pointer-events: none;
  }
  
  .mynav a,
  .target {
    transition: all .35s ease-in-out;
  }



  /* ================================ STICKY ========================*/


/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
    position: fixed;
    top: 0;
    width: 100%;

  }

  .bottomnav.sticky {
      padding: 0rem;
  }

  .bottomnav.sticky .items .item {
      margin: auto;
  }

  .bottomnav.sticky .items .item:nth-child(2)  {
      display: none;
  }


/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
/* .sticky + .swiper-container {
    padding-top: 60px;
  }
 */


.bottomnav {
    background-color: white;
    overflow: hidden;
    padding: 1rem;
    z-index: 1200;
  }


  #mybottomnav .items {
      display: flex;
      justify-content: space-between;
      align-items: center;
  }
  

  #mybottomnav .items .item .mynav ul{
      display: flex;
      align-items: center;
  }
  

  #mybottomnav .items .item .mynav ul li{
      display: flex;
      align-items: center;
  }
  

  #mybottomnav .items .item .mynav ul li:nth-child(4){
      margin-left: .5rem;
      /* background-color: red; */
  }
  
  /* Style the links inside the navigation bar */
  .bottomnav a {
    /* float: left;
    display: block; */
    color: rgb(94,94,94);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    text-transform: uppercase;
    font-weight: 600;
  }
  
  /* Add an active class to highlight the current page */

/*     
    .active {
     color: black;
    font-weight: 600; 
    color: #363636;
   }  */
  

  /* Hide the link that should open and close the bottomnav on small screens */
  .bottomnav .icon {
    display: none;
  }
  

  /* ============================ DROP DOWN MENU =============================== */
  /* Dropdown container - needed to position the dropdown content */
  .dropdown {
    /* float: left; */
    overflow: hidden;
  }
  
  /* Style the dropdown button to fit inside the bottomnav */
  .dropdown .dropbtn {
    font-size: 17px;
    border: none;
    outline: none;
    /* color: rgb(94,94,94); */
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
    text-transform: uppercase;
    font-weight: 600;
    display: flex;
    align-items: center;
  }
  
  /* Style the dropdown content (hidden by default) */
  .dropdown-content {
    display: none;
    position: fixed;
    background-color: #f7c51e;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    color: rgb(94,94,94);
  }
  
  /* Style the links inside the dropdown */
.mynav   .dropdown-content a {
    font-size: 14px;
    font-weight: 500;
    float: none;
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    text-transform: uppercase;
  }
  
  /* Add a dark background on bottomnav links and the dropdown button on hover */
  .bottomnav a:hover, .dropdown:hover .dropbtn {
    /* background-color: red; */
    color: black;
    

  }
  
  /* Add a grey background to dropdown links on hover */
  .dropdown-content a:hover {
    /* background-color: red; */
    color: black;
    
  }

  
  /* Show the dropdown menu when the user moves the mouse over the dropdown button */
  .dropdown:hover .dropdown-content {
    display: block;
    z-index: 101;
  }
  
  
  /* SEARCH ICONS */

  #mybottomnav .items .item .fa-search{
      font-size: 1.25rem;
      color: #363636;
  }




/* ========================== Bottom White Header Menu - END ================ */

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- Keywords -->
    <meta name="description" content="Mulching Company for any type of commercial, government or private client!">
  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="icon" href="img/Quality_Improvements_favicon_Logo.png" type="image/gif" sizes="16x16">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css"
        integrity="sha384-REHJTs1r2ErKBuJB0fCK99gCYsVjwxHrSU0N7I1zl9vZbggVJXRMsv/sLlOAGb4M" crossorigin="anonymous">
    <!-- CSS STYLES -->
    <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" media="screen and (max-width: 1024px)" href="css/mobile.css">

    <!-- text animation css -->
    <!-- <link rel="stylesheet" href="https://unpkg.com/tachyons/css/tachyons.min.css"> -->
    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> -->
    <!-- <link rel="stylesheet" href="css/tachyons-animate.css"> -->


    <!-- Swiper Header Slider -->
    <!-- <link rel="stylesheet" href="/css/swiper.min.css"> -->
    <!-- <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css"> -->


    <title>Quality Mulching</title>
</head>



<body id="home">


    <!-- Header Container -->

    <!-- Navbar-Black -->
    <div id="masthead" class="site-header">
        <nav class="header-container">

            <!-- Top Black Header Bar -->
            <div class="header-container_wrap">
                <div class="container">
                    <div class="items">
                        <div class="quality-logo">
                            <a href="https://www.lonestarwebandgraphics.com">
                                <img border="0" alt="quality-logo" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="quality-logo" >
                                </a>
                            <!-- <img src="img/Quality_Improvements_250PX_Logo.png" alt="quality-logo"> -->
                            <p>Offering Quality work at a fair price to the Central Texas area.</p>
                        </div>
                        <div class="contact-info">
                            <div class="item">
                                <i class="fas fa-phone"></i>
                                <div class="contact-block__value-wrap">
                                    <p> Call Today</p>
                                    <p><strong>(555-2042</strong></p>
                                </div>
                            </div>
                            <div class="item">
                                <i class="fas fa-clock"></i>
                                <div class="contact-block__value-wrap">
                                    <p>Mon-Fri:<strong> 7am to 7pm</strong></p>
                                    <p>Sat & Sun: 9am-4pm</p>
                                </div>
                            </div>
                            <div class="item">
                                <i class="fas fa-map-marker-alt"></i>
                                <p>Serving Central Texas</p>
                            </div>
                            <div class="item">
                                <button class="facebook-like">
                                    <i class="fab fa-facebook-f"></i>
                                    <p>LIKE US</p>
                                </button>
                                <!-- <div class="facebook-like">
                                    <i class="fab fa-facebook-f"></i>
                                    <p>LIKE US</p>
                                </div> -->
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            
            <!-- ======================== Bottom White header START ======================-->


            <div class="bottomnav" id="mybottomnav">
                <div class="container">
                    <div class="items">
                        <div class="item">
                            <nav class="mynav">

                                <!-- <a href="#home" class="active">Menu Click Here</a> -->
                                <!-- Hamburger -->
                                <ul>
                                    <div class="hamburger">
                                        <!-- <p class="active">Menu Click Here</p> -->
                                        <a href="javascript:void(0);" class="icon" onclick="myFunction()"><p>Menu Click Here </p>  &#9776;</a>
                                    </div>
                                    <li><a href="about.html">About</a></li>
                                    
                                    <!-- DROPDOWN MENU -->
                                    
                                        <li>
                                            <div class="dropdown">
                                                <button class="dropbtn">
                                                
                                                    <a href="services.html">Services <i class="fa fa-caret-down"></i></a>
                                                    
                                                </button>
                                                
                                                <div class="dropdown-content">
                                                    <a href="brush-mulching-land-clearing.html">Brush Mulching & Land Clearing</a>
                                                    <a href="mapping-measurement.html">Mapping & Measurement</a>
                                                    <a href="erosion-mitigation-driveways-roads.html">Erosion Mitigation / Driveways / Roads</a>
                                                    <a href="landscaping-drainage-management.html">Landscaping & Drainage Management</a>
                                                    <a href="foundation-pads.html">Foundation & Pads</a>
                                                    <a href="general-dirt-work.html">General Dirt Work & Tank Pond Trenching</a>
                                                    <a href="demolition-clean-up.html">Demolition & Clean Up</a>
                                                    <a href="septic-installation.html">Septic Installation</a>
                                                </div>
                                            </div>
                                        </li>
                                  
                                    <!-- DROPDOWN MENU END -->
                                    
                                    <li><a href="photo-gallery.html">Photo Gallery</a></li>
                                    <li><a href="video-example.html">Video Example</a></li>
                                    <li><a href="contacts.html">Contacts</a></li>
                                    <!-- <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a> -->
                                </ul>
                            </nav>
                            

                        </div>

                        <div class="item">
                            <i class="fas fa-search"></i>
                        </div>
                    </div>

                </div>
            </div>
            <span class="target"></span>

            <!-- ======================== Bottom White header END ======================-->
            
        </nav>
    </div>

    <!-- HEADER CONTAINER END -->

Answer 1

问题已由删除 - links[i].addEventListener("click", (e) => e.preventDefault()); 在 javascript.

Javascript 功能阻止菜单锚链接工作

Javascript Function Is Preventing Menu Anchor Links From Working

html

javascript

menu

function

hyperlink