如何使用 CSS 为导航栏设置下划线格式

Question

I figured out how to make an underline under a part of my navigation bar when I am hovering over the word.当我将鼠标悬停在单词上时，我想出了如何在导航栏的一部分下添加下划线。 I am trying to make it in the same format for when I am on that page so that the underline stays there.当我在该页面上时，我正在尝试以相同的格式制作它，以便下划线留在那里。 I can't figure this out.我想不通。 Would love some help.希望得到一些帮助。 Thanks:)谢谢：）

 *{ 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); }

 <.DOCTYPE html> <html lang="en"> <link rel="stylesheet" href="style,css"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title> Change </title> </head> <body> <div class="topnav"> <a class="active" href="index.html">Home</a> <a href="#news">DontUse</a> <a href="#contact">DontUse</a> <a href="about.html">About</a> </div> <p> This is the home page </p> </body> </html>

Answer 1

Here you go, using jquery.这里你使用 go，使用 jquery。 Also made a new active-menu class .topnav a.active-menu:before还制作了一个新的活动菜单 class .topnav a.active-menu:before

 $("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; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <.DOCTYPE html> <html lang="en"> <link rel="stylesheet" href="style,css"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <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>

如何使用 CSS 为导航栏设置下划线格式

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-05-13 23:54:13

如何使用 CSS 为导航栏设置下划线格式

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-05-13 23:54:13

解决方案1
0 已采纳 2020-05-13 23:54:13