[英]how do i make a active class which keep on my current page with a border effect
我正在處理一個項目，我在每個用戶想要播放動畫的標簽上都有動畫效果，然后該頁面將被重定向。 但問題是我想要當前導航欄下方的邊框底部。
.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>中解開<li> 。
換句話說，寫
<ul>
<li></li>
</ul>
在這種結構中並通過 css 給出粗體/大小樣式。
當它是當前頁面時，如何使當前的導航鏈接也處於活動狀態？
[英]How do i make current nav link which is also home page active when it's the current page?
重新加載頁面后，如何通過Twitter Bootstrap使當前選項卡保持活動狀態？
[英]How do I keep the current tab active with twitter bootstrap after a page reload?
如何僅保留積雪效果覆蓋我的頁面而不創建新部分？
[英]How do I only keep the snow effect to cover my page without creating a new section?
我該如何為about資源'philosophy.hbs'而不是'index.hbs'創建登陸頁面，同時仍保持Ember的'active'類？
[英]How do I make the landing page for the about resource 'philosophy.hbs' instead of 'index.hbs' and still keep Ember's 'active' class?
有沒有辦法讓我的導航欄處於活動狀態並保持 hover 效果？
[英]Is there a way to make my navbar active and also keep hover effect?
如何在使用 localStorage 刷新頁面后保持活動選項卡？
[英]How do I keep the active tab after page refresh with localStorage?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.