gpt4 book ai didi

javascript - 在 HTML 中调用 JS 脚本

转载 作者:太空宇宙 更新时间:2023-11-03 22:57:05 26 4
gpt4 key购买 nike

您好,我有这段代码,我想以紫色显示事件链接。我在 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");
});
});

最佳答案

你有两个问题。

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

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

  1. 链接被点击
  2. JavaScript 开始运行
  3. JavaScript 修改页面的 DOM
  4. JavaScript 完成
  5. 浏览器跟随链接
  6. 修改DOM的页面被丢弃
  7. 加载新页面

…并且新页面还没有被 JavaScript 修改过。

active 类放入新页面的 HTML 中。

关于javascript - 在 HTML 中调用 JS 脚本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38040128/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com