小贝子编程

如何创建一个活动类，该类保持在当前页面上并具有边框效果



我正在处理一个项目，在这个项目中，我在用户想要去的每个标签上都有一个动画效果，然后会出现一个动画，然后该页面会被重定向。但问题是，我想在当前导航栏的下面有一个边界底部。

.index.html

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<nav class="new__parent-navbar">
<div class="new__logo">
<a href="/getdata/startups" class="logo-link"
><h1 class=""><b>Header-issue</b></h1></a
>
</div>
<div class="new__navbar h-nav">
<ul class="new__nav-list v-class">
<h4 class="">
<li class=""><a href="/home.html">HOME</a></li>
</h4>
<h4 class="">
<li class=""><a href="/about.html">ABOUT</a></li>
</h4>
<h4 class="">
<li class=""><a href="/contact.html">CONTACT US</a></li>
</h4>
<h4 class="">
<li class=""><a href="/job.html">JOBS</a></li>
</h4>
<!-- <h4 class="">
<li class=""><a href="/login/startup" class="login-nav"> LOGIN</a></li>
</h4> -->
</ul>
<h4 class="">
<a class="login-nav" href="/login/startup">LOGIN</a>
</h4>
</div>
<br />
<br />
<!-- <div class="rightNav v-class">
<input type="text" name="search" id="search">
<button class="btn btn-sm">SEARCH</button>
<h1>rightnav</h1>
</div> -->
<div class="new__burger">
<div class="new__line"></div>
<div class="new__line"></div>
<div class="new__line"></div>
</div>
</nav>
<script>
burger = document.querySelector(".new__burger");
navbar = document.querySelector(".new__navbar");
// rightNav = document.querySelector('.rightNav')
navlist = document.querySelector(".new__nav-list");
black = document.querySelector(".b-black");
burger.addEventListener("click", () => {
navbar.classList.toggle("h-nav");
//  rightNav.classList.toggle('v-class');
navlist.classList.toggle("v-class");
navbar.classList.toggle("b-black");
});
/* --------------------------------   Rachit Gupta */
window.addEventListener("scroll", function () {
let header = document.querySelector("nav");
header.classList.toggle("sticky", window.scrollY > 0);
});
/* -------------------------------  End  */
</script>
</body>
</html>

style.css

/* @import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;1,100&family=Open+Sans&family=Raleway:wght@200;400&display=swap"); */
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
font-family: "Raleway", serif;
}

body {
font-family: "Raleway", serif;
/* font-family:'Roboto Slab', serif; */
}
/* --------------------------------   Rachit Gupta */
/* .new__parent-navbar {
display: flex;
position: fixed;
width: 100%;
justify-content: space-between;
transition: 0.6s;
z-index: 5;
} */

nav.sticky {
top: 0%;
background: #FBFBFB;

/* color:; */
/* text-decoration: ; */
}
nav .sticky li a{
text-decoration: none;
color: white;
/* background: rgb(27, 26, 90); */
position: relative;
font-size: 1.1rem; 
} 

/* -------------------------------  End  */
.new__parent-navbar {
display: flex;
/*START of added code*/
position: fixed; 
top: 0; 
left: 0;
right:0;
z-index: 999;
/*DONE*/
/* background: white; */
box-shadow: 1px 1px 4px 1px rgb(152, 152, 152);
/* border-radius: 0px 0px 5px 5px; */
margin-bottom: 40px;
padding: 7px 0px;
/* width: 80%; */
}
/*Added*/
a.active{
text-decoration: 1px solid goldenrod;
color: aquamarine;
}
.new__logo {
width: 30%;/*changes*/
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;
font-weight: 300;
position: relative;
left: 10px;
/* background: white; */
color: rgb(78, 78, 167);
/* font-size: 60px; */

/* background-color: blue; */
}
.new__navbar {
display: flex;
/* background: white; */
/* /* display: fixed;
top: 0px;
left:0px; */
/* z-index: 3;  */
}
.new__nav-list {
width: 100%;
/* background: #15114b; */
display: flex;
justify-content: flex-end;
align-items: center;
}

.new__nav-list li {
list-style: none;
color: black;
padding: 10px 10px;
}
.new__nav-list li a {
text-decoration: none;
color: rgb(21, 41, 123);
position: relative;
font-size: 1rem; /**/
}
.new__nav-list li a:hover {
color: #2A528A;
}

.new__nav-list li a::after {
position: absolute;
content: "";
display: block;
margin-top: 5px;
width: 0;
height: 2px;
background: #fcd600;
transition: width 0.3s;
left: 50%;
transform: translate(-50%, 0);
}

.new__nav-list li a:hover::after {
width: 100%;
}
#search {
padding: 5px;
font-size: 17px;
border: 2px solid grey;
border-radius: 9px;
margin-top: 15px;
}
.new__burger {
position: absolute;
cursor: pointer;
right: 4%;
top: 15px;
display: none;
}
.new__line {
width: 33px;
/* background: #fff; */
height: 4px;
margin: 4px 3px;
border-radius: 43px;
}

.logo-link {
margin-left: 6%;
color: rgb(23, 27, 135);
text-decoration: none;
position: absolute;
left: 80px; /*made a change : 80px, No change*/ 
text-shadow: 1px 1px 1px grey; /* added */
}
.logo-link:hover {
color: navy; /*midnightblue;*/
text-decoration: none;
transform: scale(1.05);
text-shadow: 2px 2px 2px grey;
}
/* .logo-link:focus {
color: white;
text-decoration: none;
} */


@media (max-width: 992px) {
.new__parent-navbar {
flex-direction: column;
}
.new__logo {
padding-top: 10px;
width: 100%;
}
.new__nav-list {
flex-direction: column;
justify-content: center;
align-items: center;
}
.new__navbar {
flex-direction: column;
justify-content: center;
align-items: center;
transition: all 0.5s ease-out;
height: 100vh;
}
.rightNav {
text-align: center;
}
#search {
width: 100%;
}
.new__burger {
display: block;
}
.h-nav {
height: 11px;
/* height: 372px; */
}
.v-class {
opacity: 0;
display: none;
}
}
/*My code  yogita*/
.login-nav{
height: auto;
width: 100px;
position: relative;
top: 10px;
bottom: 20px;
left: 280px;
margin: 20px;
padding: 2px 10px;
background-color: navy;
color: white;
text-shadow: 1px 1px 1px #eee;
border-radius: 20px;
border: 2px solid navy;
box-shadow: 1px 1px 5px 1px grey;
}
.login-nav:hover{
box-shadow: 1px 2px 3px 1px grey;
text-decoration: none;
color: white;
text-shadow: 1px 2px 3px grey;
/* transform: scale(1.05); */
}
/* ---------------------end --------- */

contact.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<nav class="new__parent-navbar">
<div class="new__logo">
<a href="""" class="logo-link"
><h1 class=""><b>Header-issue</b></h1></a
>
</div>
<div class="new__navbar h-nav">
<ul class="new__nav-list v-class">
<h4 class="">
<li class=""><a href="/home.html">HOME</a></li>
</h4>
<h4 class="">
<li class=""><a href="/about.html">ABOUT</a></li>
</h4>
<h4 class="">
<li class=""><a href="/contact.html">CONTACT US</a></li>
</h4>
<h4 class="">
<li class=""><a href="/job.html">JOBS</a></li>
</h4>
</ul>
<h4 class="">
<a class="login-nav" href="/login/startup">LOGIN</a>
</h4>
</div>
<br />
<br />
<div class="new__burger">
<div class="new__line"></div>
<div class="new__line"></div>
<div class="new__line"></div>
</div>
</nav>
<script>
burger = document.querySelector(".new__burger");
navbar = document.querySelector(".new__navbar");
// rightNav = document.querySelector('.rightNav')
navlist = document.querySelector(".new__nav-list");
black = document.querySelector(".b-black");
burger.addEventListener("click", () => {
navbar.classList.toggle("h-nav");
//  rightNav.classList.toggle('v-class');
navlist.classList.toggle("v-class");
navbar.classList.toggle("b-black");
});
window.addEventListener("scroll", function () {
let header = document.querySelector("nav");
header.classList.toggle("sticky", window.scrollY > 0);
});
/* -------------------------------  End  */
</script>
contact
</body>
</html>

等等

所有关于、联系和工作的其他内容都是相同的

您是否尝试过去掉页面名称前的/？

更改<li class=""><a href="/contact.html">CONTACT US</a></li>

通过<li class=""><a href="contact.html">CONTACT US</a></li>

问题是HTML代码不是语义的。您在当前页面中的active类与相应的<li>或<a>完全可以正常工作。

只需要从<h4>s打开<li>s。

换句话说，写

<ul>
<li></li>
</ul>

在此结构中，并通过css提供粗体/大小样式。

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium