Question

你好，我有这个代码，我想显示紫色的活动链接。我在js文件中有，但似乎没有按预期工作。我不确定我到底做错了什么。其他一切都正常工作，但当你碰到一个链接时，它无法突出显示为紫色，就像在CSS中一样。我只提供了必要的代码，任何人？

HTML

<html>
  <head>
    <link href="site.css" rel="stylesheet">   <script src="color.js"></script>
  </head>
  <body>
    <div class="nav-container">
      <ul class="navigation-menu">
        <li><a href='start.php'>Home</a></li>
        <li><a href='pay.php'>C2B Payments</a> </li>
        <li><a href='sms.php'>C2B SMS</a></li>
        <li><a href='#'>B2C Payments</a>
          <ul>
            <li><a href="getbtc.php"> B2C Payments</a></li>
            <li><a href="payment.php"> Make Payments</a></li>
          </ul>
        </li>
        <li><a href='bsms.php'>B2C SMS</a></li>
        <li><a href='index.php'>Log Out</a></li>
      </ul>
    </div>
  </body>
</html>

css（site.css）

.navigation-menu li.active a {
  background-color: purple;
  color:#fff;
}
.navigation-menu li ul {
  display: none;
}

.navigation-menu li a:hover{
  background-color:black;
  color: white;
}
.navigation-menu li a.active {
  background-color: purple;
  color:#fff;
}

javascript（color.js）

$(document).ready(function(){
  $('ul li a').click(function(){
    $('li a').removeClass("active");
    $(this).addClass("active");
  });
});

Answer 1

你有两个问题。

首先，您没有在页面上包含jQuery，因此当JS运行时，它会抛出错误，因为$未定义。

如果您要修复，那么这将是事件的顺序：

点击链接
JavaScript开始运行
JavaScript修改页面的DOM
JavaScript完成
浏览器遵循链接
丢弃包含已修改DOM的页面
已加载新页面

...并且JavaScript未修改新页面。

将active类放在新页面的HTML中。

Answer 2

您必须检查页面网址并匹配元素中的href，并将class active添加到相应的元素

你必须包含jQuery Lib

将test.html page2.html替换为您拥有的页面名称

在关闭body标签

之前，在pageName变量中更改/添加页面名称nad此脚本

在HTML

2 个答案: