Hallo zusammen!
Ich möchte mit AJAX HTML-Inhalte laden.
Mein Problem ist aber das er stattdessen auf die verlinkte Seite springt.
Ich dachte das würde ich mit preventDefault verhindern?
Wäre super wenn mir jemand helfen könnte!
Ich möchte mit AJAX HTML-Inhalte laden.
Mein Problem ist aber das er stattdessen auf die verlinkte Seite springt.
Ich dachte das würde ich mit preventDefault verhindern?
Wäre super wenn mir jemand helfen könnte!
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Name Der Seite</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/mein.css">
</head>
<body>
<nav class="navbar navbar-toggleable-md">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">☰
</button>
<div class="collapse navbar-collapse" id="navbarToggler">
<a class="navbar-brand" href="html/startseite.html">Startseite</a>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item">
<a class="nav-link" href="html/zweiterInhalt.html">link1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">link2</a>
</li>
</ul>
</div>
</nav>
<section id="cover">
<div id="titelzeile">
<div class="container">
<div class="col-sm-12" class="inhalt">
</div>
</div>
</div>
</section>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(".navbar a").on("click", function(e) {
e.preventDefault();
var url = $(this).attr("href");
$(".inhalt").load(url);
});
</script>
</body>
</html>
