gpt4 book ai didi

html - 如何使用jquery给导航栏加下划线

转载 作者:行者123 更新时间:2023-12-01 08:29:41 25 4
gpt4 key购买 nike

@ikiK 我尝试实现您的解决方案,但没有成功。我的所有文件都在同一个文件夹中,html文件称为index.html,css文件称为style.css,jquery文件称为script.js我无法弄清楚我做错了什么,所以如果你可以指导我如何修复它,我将不胜感激。

$("a").click(function(){
$("a.active-menu").removeClass("active-menu");
$(this).addClass("active-menu");
});
*{
margin:0;
padding:0;
border:0;
}


.topnav {
background-color: purple;
overflow: hidden;
}

.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
position: relative;
}

.topnav a:before {
content: "";
position: absolute;
width: 84%;
height: 2px;
bottom: 3px;
left: 8%;
background-color: white;
visibility: hidden;
transform: scaleX(0);
transition: all 0.3s ease-in-out 0s;
}

.topnav a:hover:before {
visibility: visible;
transform: scaleX(1);
}
.topnav a.active-menu:before {
content: "";
position: absolute;
width: 84%;
height: 2px;
bottom: 3px;
left: 8%;
background-color: white;
visibility: visible;
transform: scaleX(1);
transition: all 0.3s ease-in-out 0s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<title>
Change
</title>
</head>

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

</html>

最佳答案

说明

您不能(或不应该)使用 jquery 在悬停时更改它。相反,当导航到另一页面时,手动从一个链接中取出事件菜单类,然后再转到另一个链接。示例:

示例

index.html

<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>

关于/index.html

<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>

注意

如果您希望事件链接不起作用,请替换名称(例如,将 index.html 替换为 #

关于html - 如何使用jquery给导航栏加下划线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61839403/

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