Hier mal der Beweis.
Wenn wir nach einem Script arbeiten, das überhaupt nicht funktioniert, brauchen wir uns nicht zu wundern
Habe dieses Script hier:
https://jsfiddle.net/javigonzalez/mphxw6ct/8/
... nun händisch nachgebaut.
Dieser Nachbau ist also 1:1 übernommen und nur auf einer
einzelnen Seite mit dem Raute-Zeichen # (nach oben):
Hier ist die nachgebaute "Schummelseite":
URL wurde gelöscht ...
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>
Hier dann exakt die gleiche Seite mit echten Links auf andere Seiten und dann
geht es eben nicht - genau wie natürlich auch beim korrekten Einbau in Mobirise
Es gibt hier also folgende Seiten:
index.html
seite1.html
seite2.html
seite3.html
URL wurde gelöscht ...
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>
Ebenso ist es mit allen anderen Scripts, die ich bisher finden konnte, denn die beziehen sich alle immer auf die gleiche Seite - und dann geht das natürlich auch, wie z.B. auf der Seite von
w3schools.com mit den Buttons:
https://www.w3schools.com/howto/howto_j ... lement.asp