Code: Alles auswählen
navlist = document.querySelectorAll('.nav-link');
console.log(navlist); 
Code: Alles auswählen
<style>
/* Style the active class, and buttons on mouse-over */
.active, .nav-item:hover {
background-color: #6592e6;
}
</style>Code: Alles auswählen
<script>
// Add active class to the current button (highlight it)
var header = document.getElementById("myNAV");
var btns = header.getElementsByClassName("nav-item");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
</script>
Code: Alles auswählen
<li class="nav-item active">
<a class="nav-link link text-white text-primary display-4" href="index.html">Startseite</a>
</li>Code: Alles auswählen
<script>
// Add active class to the current button (highlight it)
var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
if (current.length > 0) {
current[0].className = current[0].className.replace(" active", "");
}
this.className += " active";
});
}
</script>
Code: Alles auswählen
<script>
let navlist = document.querySelectorAll('.mynavlist');
for (let i = 0; i < navlist.length; i++) {
navlist[i].addEventListener('click', function() {
"use strict";
for (let x = 1; x <= navlist.length; x++) {
if (navlist[x] == this) {
alert (x);
alert ("found");
navlist[x].classList.add('active');
} else {
alert (x);
alert ("reset");
navlist[x].classList.remove('active');
}
}
});
}
</script>
Code: Alles auswählen
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Testseite</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#nav {
position: relative;
float: left;
background: #8B0000;
width: 100%;
}
.topnav {
margin: 0;
padding: 0;
}
.topnav li {
display: inline-block;
list-style: none;
}
.topnav li a {
color: #fff;
text-decoration: none;
font-size: 16px;
height: 40px;
line-height: 40px;
padding: 15px 20px;
}
.topnav li a:hover,
.topnav li a:focus,
.topnav li a.active {
background: #000;
}
</style>
</head>
<body>
<h3>Schummelseite</h3>
<nav id="nav" role="navigation">
<ul class="topnav">
<li><a href="#" class="navlist">Startseite</a></li>
<li><a href="#" class="navlist">Seite 1</a></li>
<li><a href="#" class="navlist">Seite 2</a></li>
<li><a href="#" class="navlist">Seite 3</a></li>
</ul>
</nav>
<script>
let navlist = document.querySelectorAll('.navlist');
for (let i = 0; i < navlist.length; i++) {
navlist[i].addEventListener('click', function() {
"use strict";
for (let x = 0; x < navlist.length; x++) {
if (navlist[x] == this) {
navlist[x].classList.add('active');
} else {
navlist[x].classList.remove('active');
}
}
});
}
</script>
</body>
</html>
Code: Alles auswählen
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Testseite</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#nav {
position: relative;
float: left;
background: #8B0000;
width: 100%;
}
.topnav {
margin: 0;
padding: 0;
}
.topnav li {
display: inline-block;
list-style: none;
}
.topnav li a {
color: #fff;
text-decoration: none;
font-size: 16px;
height: 40px;
line-height: 40px;
padding: 15px 20px;
}
.topnav li a:hover,
.topnav li a:focus,
.topnav li a.active {
background: #000;
}
</style>
</head>
<body>
<h3>Seite 1</h3>
<nav id="nav" role="navigation">
<ul class="topnav">
<li><a href="index.html" class="navlist">Startseite</a></li>
<li><a href="seite1.html" class="navlist">Seite 1</a></li>
<li><a href="seite2.html" class="navlist">Seite 2</a></li>
<li><a href="seite3.html" class="navlist">Seite 3</a></li>
</ul>
</nav>
<script>
let navlist = document.querySelectorAll('.navlist');
for (let i = 0; i < navlist.length; i++) {
navlist[i].addEventListener('click', function() {
"use strict";
for (let x = 0; x < navlist.length; x++) {
if (navlist[x] == this) {
navlist[x].classList.add('active');
} else {
navlist[x].classList.remove('active');
}
}
});
}
</script>
</body>
</html>Schubladefür uns ...
Auf seiner eigenen Seite verwendet er (vermutlich) je Seite einen eigenes Menü in dem der entsprechende Punkt dann schon aktiv ist.Tommy Herrmann hat geschrieben: ↑Di 7. Nov 2023, 07:22 ... keine Ahnung, wie er das auf seiner eigentlichen Seite gezaubert hat.
Code: Alles auswählen
<li class="active"><a href="https://javigonzalez.ch/ueber-mich" title="Über mich" >Über mich</a></li>Code: Alles auswählen
<li><a href="#" class="navlist">Menü</a></li>
<li><a href="#" class="navlist">Menü</a></li>Code: Alles auswählen
<li><a href="index.html" class="navlist">Startseite</a></li>
<li><a href="seite1.html" class="navlist">Seite 1</a></li>
<li><a href="seite2.html" class="navlist">Seite 2</a></li>
Code: Alles auswählen
<script>
document.querySelector("a[href='seite-2.html']").classList = "active";
</script>Code: Alles auswählen
<style>
/* Style the active class, and buttons on mouse-over */
.active, .nav-item:hover {
background-color: #6592e6;
border-radius: 30px;
</style>
Code: Alles auswählen
<!-- JavaScript to change active menu link -->
<script>
function setActive() {
linkObj = document.getElementById('mynav').getElementsByTagName('a');
for(i=2;i<linkObj.length;i++) {
if(document.location.href.indexOf(linkObj[i].href)>=0) {
linkObj[i].classList.add("active");
}
}
}
window.onload = setActive;
</script>
Mitglieder in diesem Forum: Bing [Bot] und 151 Gäste
