I want to set up a template with a navbar, sidebar, etc. that I can call for several different html files. I tried copying and pasting the suggested jQuery code and I can’t get it to work. I don’t understand what I could be doing wrong. I tried changing the jQuery version to the most recent one. I tried downloading jQuery. I even downloaded it straight into the directory too. I’m using local host and running on Chrome if that makes a difference. The sidebar is from, I think, bootstrap’s website.
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-3.7.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>
<script>
$(function () {
$("#sidebar").load("sidebar.html");
});
</script>
</head>
<body>
<div id="sidebar"></div>
</body>
</html>```
________________________________________________________________________________________________
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<title></title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Text&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="sidebar" class="col-2 p-3 text-white bg-dark">
<ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item">
<a href="#" class="nav-link active" aria-current="page">
<svg class="bi me-2" width="16" height="16">
<use xlink:href="#home" />
</svg>
AC
</a>
</li>
<li>
<a href="#" class="nav-link text-white">
<svg class="bi me-2" width="16" height="16">
<use xlink:href="#speedometer2" />
</svg>
Acura
</a>
</li>
<li>
<a href="#" class="nav-link text-white">
<svg class="bi me-2" width="16" height="16">
<use xlink:href="#table" />
</svg>
Alfa Romeo
</a>
</li>
<li>
<a href="#" class="nav-link text-white">
<svg class="bi me-2" width="16" height="16">
<use xlink:href="#grid" />
</svg>
Alpine
</a>
</li>
<li>
<a href="#" class="nav-link text-white">
<svg class="bi me-2" width="16" height="16">
<use xlink:href="#people-circle" />
</svg>
Aston Martin
</a>
</li>
</ul>
<hr>
</div>
</body>
</html>```