使用JS单击时更改文本行的颜色
使用JS单击时更改文本行的颜色
提问于 2021-09-24 19:39:48
我刚加入JavaScript，当我用JS点击它的时候，我一直在尝试改变我网站中文字行的颜色，我知道有一些方法可以用CSS来实现，但我想练习一些JS，这就是我迄今为止一直在尝试的：
我有一份清单：
function white() {
const input = document.getElementById("weekly");
input.style.color = "white";
}<ul>
<li><a id="weekly" href="/index.html" onclick="white()">Weekly</a></li>
</ul>
这是一个更长的列表，但我不希望这看起来很混乱:)
我想改变“每周”的颜色，当它被点击时，这就是我尝试过的:我已经尝试了一段时间，这是我想出来的最好的，但似乎不起作用。
回答 4
Stack Overflow用户
回答已采纳
发布于 2021-09-24 20:02:53
通常情况下，<a>标记会将您重定向到链接，但是您可以避免重定向，然后通过使用将停止元素默认行为的preventDafault函数将自定义函数应用于<a>标记。
function white(event) {
event.preventDefault()
const input = document.getElementById("weekly");
input.style.color = "white";
}<ul>
<li><a id="weekly" href="/index.html" onclick="white(event,this)">Weekly</a></li>
</ul>
Stack Overflow用户
发布于 2021-09-24 19:51:40
尽管只有一秒的时间，锚标记的文本实际上被设计为白色文本。锚标记将用户带到/index.html，因此只要用户在页面上，效果就不可见。为了避免重定向，请将href属性设置为#
function white() {
const input = document.getElementById("weekly");
input.style.color = "white";
}<ul>
<li><a id="weekly" href="#" onclick="white()">Weekly</a></li>
</ul>
Stack Overflow用户
发布于 2021-09-24 19:55:30
同样的代码片段也能工作。您面临的问题是您的<a>标记有一个链接，即导航到我假设的相同页面，因此页面被重新加载，链接又是黑色的。使用href (和更可见的颜色)参见：
function white() {
const input = document.getElementById("weekly");
input.style.color = "green";
}<ul>
<li><a id="weekly" onclick="white()">Weekly</a></li>
</ul>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69320334
复制相关文章
相似问题
腾讯云开发者
