如何修改 JavaScript 代码以使其适用于新的链接结构？

Question

  // Start Current Link (ACTIVE MENU LINK)
  jQuery(document).ready(function () {
    jQuery(".navigation > li").click(function () {
      jQuery(".navigation > li").removeClass("current");
      jQuery(this).addClass("current");
    });
    var loc = window.location.href;
    jQuery(".navigation > li").removeClass("current");
    jQuery(".navigation > li > a").each(function () {
      if (loc.indexOf(jQuery(this).attr("href")) != -1) {
        jQuery(this).closest("li").addClass("current");
      }
    });
    // The Below Code for fix current active dropdown when choose sub link from the dropdown menu
    jQuery(".navigation > .dropdown").click(function () {
      jQuery(".navigation > .dropdown").removeClass("current");
      jQuery(this).addClass("current");
    });
    var loc = window.location.href;
    jQuery(".navigation > .dropdown > ul > li").removeClass("current");
    jQuery(".navigation > .dropdown > ul > li > a").each(function () {
      if (loc.indexOf(jQuery(this).attr("href")) != -1) {
        jQuery(this).closest(".dropdown").addClass("current");
      }
    });
  });

ul {
  list-style: none;
}
a {
  text-decoration: none;
}
.main-menu .navigation {
  display: flex;
  align-items: center;
  position: relative;
}
.main-menu .navigation > li {
  padding: 39.5px 0;
  margin: 0 15px;
  z-index: 2;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}
.main-menu .navigation > li.current > a {
  color: #da2c46;
}
.main-menu .navigation > li.current > a::before {
  -webkit-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -o-transform: scale(1, 1);
  transform: scale(1, 1);
}
.main-menu .navigation > li:first-child {
  margin-left: 0;
}
.main-menu .navigation > li:last-child {
  margin-right: 0;
}
.main-menu .navigation > li > a {
  color: #222222;
  /* color: #ffffff; */
  position: relative;
  display: flex;
  font-weight: 600;
  opacity: 1;
  z-index: 1;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}
.main-menu .navigation > li > a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #da2c46;
  bottom: -3px;
  left: 0;
  -webkit-transform: scale(0, 0);
  -moz-transform: scale(0, 0);
  -ms-transform: scale(0, 0);
  -o-transform: scale(0, 0);
  transform: scale(0, 0);
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}
.main-menu .navigation > li > a::after {
  content: "";
  position: absolute;
}
.main-menu .navigation > li > a:hover {
  color: #da2c46;
}
.main-menu .navigation > li > a:hover::before {
  -webkit-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -o-transform: scale(1, 1);
  transform: scale(1, 1);
}
.main-menu .navigation > li > ul {
  position: absolute;
  left: inherit;
  top: 100%;
  width: 250px;
  z-index: 100;
  display: none;
  opacity: 0;
  visibility: hidden;
  background-color: #ffffff;
  -webkit-transform: translateY(30px);
  -moz-transform: translateY(30px);
  -ms-transform: translateY(30px);
  -o-transform: translateY(30px);
  transform: translateY(30px);
  -webkit-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05),
    -2px 0px 5px 1px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05),
    -2px 0px 5px 1px rgba(0, 0, 0, 0.05);
  -ms-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05),
    -2px 0px 5px 1px rgba(0, 0, 0, 0.05);
  -o-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05),
    -2px 0px 5px 1px rgba(0, 0, 0, 0.05);
  box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05),
    -2px 0px 5px 1px rgba(0, 0, 0, 0.05);
  -webkit-transform-origin: top;
  -moz-transform-origin: top;
  -ms-transform-origin: top;
  -o-transform-origin: top;
  transform-origin: top;
  -webkit-transition: all 2s ease-in-out;
  -moz-transition: all 2s ease-in-out;
  -ms-transition: all 2s ease-in-out;
  -o-transition: all 2s ease-in-out;
  transition: all 2s ease-in-out;
}
.main-menu .navigation > li > ul > li {
  position: relative;
  width: 100%;
  padding: 11px 30px;
  border-bottom: 1px solid #eeeeee;
}
.main-menu .navigation > li > ul > li > a {
  position: relative;
  display: block;
  padding: 6px 0px;
  line-height: 24px;
  text-transform: capitalize;
  color: #222222;
  text-align: left;
  transition: all 500ms ease;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
}
.main-menu .navigation > li > ul > li > a:hover {
  color: #da2c46;
}
.main-menu .navigation > li.dropdown:hover > ul {
  display: block;
  visibility: visible;
  opacity: 1;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition: all 2s ease-in-out;
  -moz-transition: all 2s ease-in-out;
  -ms-transition: all 2s ease-in-out;
  -o-transition: all 2s ease-in-out;
  transition: all 2s ease-in-out;
}
.main-menu .navigation > li.dropdown .dropdown-btn {
  position: absolute;
  right: -32px;
  top: 66px;
  width: 34px;
  height: 30px;
  text-align: center;
  font-size: 18px;
  line-height: 26px;
  color: #3b3b3b;
  cursor: pointer;
  display: none;
  z-index: 5;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <nav class="main-menu navbar-expand-md me-auto navbar-light">
        <div class="collapse navbar-collapse show" id="navbarSupportedContent">
            <ul class="navigation">
                <li><a href="/">Home</a></li>
                <li><a href="/about-us.html">About</a></li>
                <li class="dropdown"><a href="/services.html">Services</a>
                    <ul>
                        <li><a href="/finance-consulting.html">Finance
                                Consulting</a>
                        </li>
                        <li><a href="/tax-management.html">Tax Management</a></li>
                        <li><a href="/economic-planning.html">Economic Planning</a></li>
                        <li><a href="/strategy-thinking.html">Strategy Thinking</a></li>
                        <li><a href="/market-analysis.html">Market Analysis</a></li>
                        <li><a href="/content-optimize.html">Content Optimize</a></li>
                    </ul>
                </li>
                <li><a href="/pricing.html">pricing</a></li>
                <li class="dropdown"><a href="/blog.html">Blog</a>
                    <ul>
                        <li><a href="/blog-details.html">Blog details</a></li>
                        <li><a href="/404.html">Error 404 Page</a></li>
                        <li><a href="/privacy-policy.html">Privacy Policy</a></li>
                    </ul>
                </li>
                <li><a href="/contact.html">Contact</a></li>
            </ul>
        </div>
    </nav>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   
</body>

</html>

你好 我通过搜索得到了这个javascript代码（它的功能是为打开的页面添加和删除活动类到'li'类）并按原样执行。 现在，我正在开发一个 html 网站，链接是“localhost/index.html” 并且代码在这种格式上运行良好 并且因为我想删除“index.html”链接，以便在不添加 index.html 的情况下显示主链接，所以我将主页链接从“index.html”切换到“/”并在每个页面链接之前添加“/”，如图所示在 html 结构中，结果是“current”类停留在主页链接上并添加到打开的页面中，这意味着当您打开 about us 页面时，您会发现“current”类的 css 效果是在它和主页链接上启用 我尝试修改 javascript 代码，以便该作业在新链接上工作，该链接仅是本地的，不添加 /index.html，但我不知道 我希望你能帮助我并告诉我如何编写代码以实现它所需的功能 感谢

Answer 1

考虑以下更改。

jQuery(function($) {
  function changeCurrent(elem) {
    $(".current").removeClass("current");
    $(elem).addClass("current");
  }

  function setCurrent() {
    var loc = window.location;
    console.log(loc);
    changeCurrent($(".navigation > li > a[href*='" + loc.pathname + "']"));
  }

  $(".navigation > li").click(function() {
    changeCurrent(this);
  });

  $(".navigation > .dropdown").click(function() {
    changeCurrent(this);
  });

  setCurrent();
});

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

.main-menu .navigation {
  display: flex;
  align-items: center;
  position: relative;
}

.main-menu .navigation>li {
  padding: 39.5px 0;
  margin: 0 15px;
  z-index: 2;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}

.main-menu .navigation>li.current>a {
  color: #da2c46;
}

.main-menu .navigation>li.current>a::before {
  -webkit-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -o-transform: scale(1, 1);
  transform: scale(1, 1);
}

.main-menu .navigation>li:first-child {
  margin-left: 0;
}

.main-menu .navigation>li:last-child {
  margin-right: 0;
}

.main-menu .navigation>li>a {
  color: #222222;
  /* color: #ffffff; */
  position: relative;
  display: flex;
  font-weight: 600;
  opacity: 1;
  z-index: 1;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}

.main-menu .navigation>li>a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #da2c46;
  bottom: -3px;
  left: 0;
  -webkit-transform: scale(0, 0);
  -moz-transform: scale(0, 0);
  -ms-transform: scale(0, 0);
  -o-transform: scale(0, 0);
  transform: scale(0, 0);
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}

.main-menu .navigation>li>a::after {
  content: "";
  position: absolute;
}

.main-menu .navigation>li>a:hover {
  color: #da2c46;
}

.main-menu .navigation>li>a:hover::before {
  -webkit-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -o-transform: scale(1, 1);
  transform: scale(1, 1);
}

.main-menu .navigation>li>ul {
  position: absolute;
  left: inherit;
  top: 100%;
  width: 250px;
  z-index: 100;
  display: none;
  opacity: 0;
  visibility: hidden;
  background-color: #ffffff;
  -webkit-transform: translateY(30px);
  -moz-transform: translateY(30px);
  -ms-transform: translateY(30px);
  -o-transform: translateY(30px);
  transform: translateY(30px);
  -webkit-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05);
  -ms-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05);
  -o-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05);
  box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05);
  -webkit-transform-origin: top;
  -moz-transform-origin: top;
  -ms-transform-origin: top;
  -o-transform-origin: top;
  transform-origin: top;
  -webkit-transition: all 2s ease-in-out;
  -moz-transition: all 2s ease-in-out;
  -ms-transition: all 2s ease-in-out;
  -o-transition: all 2s ease-in-out;
  transition: all 2s ease-in-out;
}

.main-menu .navigation>li>ul>li {
  position: relative;
  width: 100%;
  padding: 11px 30px;
  border-bottom: 1px solid #eeeeee;
}

.main-menu .navigation>li>ul>li>a {
  position: relative;
  display: block;
  padding: 6px 0px;
  line-height: 24px;
  text-transform: capitalize;
  color: #222222;
  text-align: left;
  transition: all 500ms ease;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
}

.main-menu .navigation>li>ul>li>a:hover {
  color: #da2c46;
}

.main-menu .navigation>li.dropdown:hover>ul {
  display: block;
  visibility: visible;
  opacity: 1;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition: all 2s ease-in-out;
  -moz-transition: all 2s ease-in-out;
  -ms-transition: all 2s ease-in-out;
  -o-transition: all 2s ease-in-out;
  transition: all 2s ease-in-out;
}

.main-menu .navigation>li.dropdown .dropdown-btn {
  position: absolute;
  right: -32px;
  top: 66px;
  width: 34px;
  height: 30px;
  text-align: center;
  font-size: 18px;
  line-height: 26px;
  color: #3b3b3b;
  cursor: pointer;
  display: none;
  z-index: 5;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<nav class="main-menu navbar-expand-md me-auto navbar-light">
  <div class="collapse navbar-collapse show" id="navbarSupportedContent">
    <ul class="navigation">
      <li><a href="/">Home</a></li>
      <li><a href="/about-us.html">About</a></li>
      <li class="dropdown"><a href="/services.html">Services</a>
        <ul>
          <li><a href="/finance-consulting.html">Finance Consulting</a></li>
          <li><a href="/tax-management.html">Tax Management</a></li>
          <li><a href="/economic-planning.html">Economic Planning</a></li>
          <li><a href="/strategy-thinking.html">Strategy Thinking</a></li>
          <li><a href="/market-analysis.html">Market Analysis</a></li>
          <li><a href="/content-optimize.html">Content Optimize</a></li>
        </ul>
      </li>
      <li><a href="/pricing.html">pricing</a></li>
      <li class="dropdown"><a href="/blog.html">Blog</a>
        <ul>
          <li><a href="/blog-details.html">Blog details</a></li>
          <li><a href="/404.html">Error 404 Page</a></li>
          <li><a href="/privacy-policy.html">Privacy Policy</a></li>
        </ul>
      </li>
      <li><a href="/contact.html">Contact</a></li>
    </ul>
  </div>
</nav>

首先，最好使用 Location 对象中的pathname。查看更多：https://www.w3schools.com/js/js_window_location.asp

其次，将重复的动作分解成函数将有助于清理代码并使其更易于频繁使用。

最后，您可以在所示方法中定义$ 以与jQuery 一起使用。您还可以使用替代品，例如 jQuery(function($j){ $j('body').css("background", "black"); })。