Html 如何使用jquery为导航栏加下划线_Html_Jquery_Css

Html 如何使用jquery为导航栏加下划线

html jquery css

Html 如何使用jquery为导航栏加下划线,html,jquery,css,Html,Jquery,Css,@ikiK我已尝试实施您的解决方案，但没有成功。我所有的文件都在同一个文件夹中，html文件名为index.html，css文件名为style.css，jquery文件名为script.js。我不知道我做错了什么，所以如果你能告诉我如何修复它，我将不胜感激 $（“a”）。单击（函数（）{ $（“a.active-menu”）.removeClass（“active-menu”）； $（此）.addClass（“活动菜单”）； }); *{ 保证金：0；填充：0；边界：0； } 托普纳夫先生

@ikiK我已尝试实施您的解决方案，但没有成功。我所有的文件都在同一个文件夹中，html文件名为index.html，css文件名为style.css，jquery文件名为script.js。我不知道我做错了什么，所以如果你能告诉我如何修复它，我将不胜感激

$（“a”）。单击（函数（）{
$（“a.active-menu”）.removeClass（“active-menu”）；
$（此）.addClass（“活动菜单”）；
});
*{
保证金：0；
填充：0；
边界：0；
}
托普纳夫先生{
背景颜色：紫色；
溢出：隐藏；
}
.topnav a{
浮动：左；
颜色：#F2F2；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
字号：17px；
位置：相对位置；
}
.托普纳夫a:以前{
内容：“；
位置：绝对位置；
宽度：84%；
高度：2倍；
底部：3px；
左：8%；
背景色：白色；
可见性：隐藏；
变换：scaleX（0）；
过渡：所有0.3秒均为0秒；
}
.topnav a:悬停：在{
能见度：可见；
变换：scaleX（1）；
}
.topnav a.活动菜单：之前{
内容：“；
位置：绝对位置；
宽度：84%；
高度：2倍；
底部：3px；
左：8%；
背景色：白色；
能见度：可见；
变换：scaleX（1）；
过渡：所有0.3秒均为0秒；
}

改变

这是主页

我看到的第一个问题是}
在第一个片段中太多了。它过早地关闭了函数。应该是：
$（“a”）。单击（函数（）{
$（“a.active-menu”）.removeClass（“active-menu”）；
$（此）.addClass（“活动菜单”）；
});
我看到的第一个问题是}
在第一个片段中太多了。它过早地关闭了函数。应该是：
$（“a”）。单击（函数（）{
$（“a.active-menu”）.removeClass（“active-menu”）；
$（此）.addClass（“活动菜单”）；
});
说明
您不能（或不应该）使用jquery在悬停时更改它。相反，当导航到另一个页面时，手动将活动菜单类从一个链接中删除，然后再转到另一个链接。例如：
例子
index.html


这是主页


关于/index.html


这是关于页面


笔记
如果希望活动链接不起作用，请将名称（例如index.html
替换为#
说明
您不能（或不应该）使用jquery在悬停状态下更改它。相反，当导航到其他页面时，请手动将活动菜单类从一个链接中删除，然后再转到另一个链接。示例：
例子
index.html


这是主页


关于/index.html


这是关于页面


笔记
如果希望活动链接不起作用，请替换该名称（例如，index.html
with#
谢谢，我刚刚更新了这个，但它仍然不起作用。你必须更具体地说明什么不起作用以及你试图实现什么。顺便说一句，我还没有看到更新。谢谢，我刚刚更新了这个，但它仍然不起作用。你必须更具体地说明什么不起作用以及你想要实现什么We’我们正在努力实现。顺便说一句，我还没有看到更新。您显然是指以前的一些对话。如果这是一个后续问题，请参考原始问题。还请明确您的目标。您想用代码实现什么，以及您面临的问题是什么？以下是原始问题和对话：我试图在导航栏中保留下划线，其样式与您在该网页上悬停时的样式相同。请编辑您的问题，以包含链接和问题陈述。当我在此处运行代码段时，菜单项在悬停时显示动画下划线。同时，下划线仍保留在选定的菜单项上。这是什么你想要实现，还是其他什么？你显然是指以前的对话。如果这是一个后续问题，请参考原始问题。还请明确你的目标。你想用代码实现什么，你面临什么问题？以下是原始问题和对话：我不是试图在导航栏中保留与您在该网页上悬停时相同样式的下划线，请编辑您的问题，以包括链接和问题陈述。当我在此处运行代码段时，菜单项在悬停时显示动画下划线。同时，下划线保留在所选菜单项上。这就是您想要的吗是要实现，还是别的什么？
<body>
  <div class="topnav" id="topnav">
    <a class="active-menu" href="index.html">Home</a>
    <a class="link" href="#">DontUse</a>
    <a class="link" href="#">DontUse</a>
    <a class="link" href="about/index.html">About</a>
  </div>
  <p>
    This is the home page
  </p>
</body>

<body>
  <div class="topnav" id="topnav">
    <a class="link" href="../index.html">Home</a>
    <a class="link" href="#news">DontUse</a>
    <a class="link" href="#contact">DontUse</a>
    <a class="active-menu" href="about.html">About</a>
  </div>
  <p>
    This is the about page
  </p>
</body>