单击菜单时，超链接问题不会重定向到另一个网页

Question

  $(document).ready(function () { $('.mobile-nav-button').on('click', function() { $( ".mobile-nav-button .mobile-nav-button__line:nth-of-type(1)" ).toggleClass( "mobile-nav-button__line--1"); $( ".mobile-nav-button .mobile-nav-button__line:nth-of-type(2)" ).toggleClass( "mobile-nav-button__line--2"); $( ".mobile-nav-button .mobile-nav-button__line:nth-of-type(3)" ).toggleClass( "mobile-nav-button__line--3"); $('.mobile-menu').toggleClass('mobile-menu--open'); return false; }); }); 

 .mobile-nav-button { width: 35px; position: absolute; margin: 2rem; right: 0; top: 0; z-index: 9999; cursor: pointer; width: 35px; height: 30px; padding-top: 2%; } .mobile-nav-button .mobile-nav-button__line { width: 100%; height: 4px; background: #0e0e0e; position: relative; transition: 1s ease; } .mobile-nav-button .mobile-nav-button__line:nth-of-type(2) { margin: 0.5rem 0; } .mobile-nav-button .mobile-nav-button__line--1 { transform: rotate(45deg); top: 13px; position: absolute; } .mobile-nav-button .mobile-nav-button__line--2 { display: none; } .mobile-nav-button .mobile-nav-button__line--3 { transform: rotate(135deg); top: 13px; position: absolute; } .mobile-menu { display: block; max-width: 500px; width: 100%; right: -100%; height: 100%; background: #fcb852; position: absolute; z-index: 9998; transition: 0.6s ease; top: 0; opacity: 0; max-height: 587px; /*height of opened menu*/ } .mobile-menu ul { position: relative; top: 50%; transform: translateY(-50%); padding: 0; } .mobile-menu ul li { list-style: none; } .mobile-menu ul li a { width: 100%; max-width: 1200px; margin: 0 auto; display: block; text-align: center; text-decoration: none; color: #0e0e0e; font-size: 3rem; font-weight: bold; overflow: hidden; position: relative; } .mobile-menu ul li a:after { content: ''; background: #0e0e0e; width: 100%; height: 100%; position: absolute; right: -100%; top: 0; z-index: -1; transition: 0.4s ease; } .mobile-menu ul li a:hover { color: #fff; } .mobile-menu ul li a:hover:after { right: 0; } .mobile-menu img { position: absolute; width: 150px; display: block; left: 50%; top: 3rem; transform: translatex(-50%); padding: 0; text-align: center; } .mobile-menu--open { right: 0; opacity: 1; } .control { margin-top: 10px; margin-right: 30px; } .menu{ min-height: 100px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header> <div class="mobile-nav-button"> <div class="mobile-nav-button__line"></div> <div class="mobile-nav-button__line"></div> <div class="mobile-nav-button__line"></div> </div> <nav class="mobile-menu"> <ul> <li><a href="index.php">Home</a></li> <li><a href="about1.php">About Us</a></li> <li><a href="#">What We Do</a></li> <li><a href="getinvolved.php">Get Involved</a></li> <li><a href="contactus.php">Contact Us</a></li> </ul> </nav> </header> 

你好，这里我设计了简单的菜单栏。 我有一些菜单，每个菜单都有一个带有.php扩展名的网页，但是当我单击菜单时，它不会将我重定向到另一页。这意味着当我单击菜单时没有任何操作

Answer 1

这将帮助您禁用href标签。

 a.disabled { pointer-events: none; cursor: default; } 

 <a href="hai.html" class="disabled">Click here</a>