英文:
How can I have the nav bar on every page of a website? It is simply not working for me
问题
以下是您要翻译的内容：
"can someone please help me get the nav bar on any page
i tried every method but none of them work
here is the nav bar"
"this SHOULD work but it comes up as blank. Very annoying"
"sorry the first file is called 'navbar.html'"
英文:
can someone please help me get the nav bar on any page
i tried every mehotd but none of them work
here is the nav bar
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/0a48c3a8e0.js" crossorigin="anonymous"></script>
</head>
<div class="navbar">
<a class="active" href="home.html"> Home </a>
<a href="about.html">About</a>
<a href="start">Start</a>
<a href="blog">Blog</a>
<div class="dropdown">
<button class="dropbutton"> Interests</button>
<div class="dropdown-content">
<a href="finance">Finance</a>
<a href="music">Music</a>
<a href="language">Language</a>
<a href="math">Math</a>
</div>
</div>
<div class="search-container">
<input type="text" placeholder="Search...">
<button type="submit"><i class="fa-sharp fa-solid fa-magnifying-glass"></i></button>
</div>
</div>
</html>
<!-- https://stackoverflow.com/questions/31954089/how-can-i-reuse-a-navigation-bar-on-multiple-pages -->
this SHOULD work but it comes up as blank. Very annoying
<!DOCTYPE html>
<html>
<div id="nav-placeholder"> </div>
<script>
$(function() {
$("#nav-placeholder").load("navbar.html")
});
</script>
</html>
sorry the first file is called "navbar.html"
答案1
得分: 0
尝试这个，我已经重新排列了您的代码。关键是，您只需要将导航栏 div 包含在外部文件中，然后在 DOM 准备就绪时调用 .load jQuery 函数，以便可以插入数据。请注意，这将导致每次加载页面时都会额外调用服务器。其他替代方法包括使用静态站点捆绑器，以便在构建阶段执行此操作，或者使用诸如React、Vue等框架，但根据您的总体用例，这可能过于繁琐。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/0a48c3a8e0.js" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$("#nav-placeholder").load("navbar.html")
})
</script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="nav-placeholder"></div>
</body>
</html>
navbar.html
<div class="navbar">
<a class="active" href="home.html"> Home </a>
<a href="about.html">About</a>
<a href="start">Start</a>
<a href="blog">Blog</a>
<div class="dropdown">
<button class="dropbutton">Interests</button>
<div class="dropdown-content">
<a href="finance">Finance</a>
<a href="music">Music</a>
<a href="language">Language</a>
<a href="math">Math</a>
</div>
</div>
<div class="search-container">
<input type="text" placeholder="Search...">
<button type="submit"><i class="fa-sharp fa-solid fa-magnifying-glass"></i></button>
</div>
</div>
Code Sandbox 链接 - 由于没有 styles.css，CSS 是错误的，但一旦您包含它，它应该被正确格式化。
编辑 - 更改了HTML
英文:
Try this, I have rearranged your code.
The key is that you need only to include the navbar div in the external file and then call the .load jQuery function once the DOM is ready so that the data can be inserted. Be aware that this will result in an additional call to the server each time a page is loaded.
Alternative ways include using a static site bundler so that this is performed during the build stage or to use a framework such as React, Vue, etc, however this may be overkill depending on your overall use-case.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/0a48c3a8e0.js" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$("#nav-placeholder").load("navbar.html")
})
</script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="nav-placeholder"></div>
</body>
</html>
navbar.html
<div class="navbar">
<a class="active" href="home.html"> Home </a>
<a href="about.html">About</a>
<a href="start">Start</a>
<a href="blog">Blog</a>
<div class="dropdown">
<button class="dropbutton">Interests</button>
<div class="dropdown-content">
<a href="finance">Finance</a>
<a href="music">Music</a>
<a href="language">Language</a>
<a href="math">Math</a>
</div>
</div>
<div class="search-container">
<input type="text" placeholder="Search...">
<button type="submit"><i class="fa-sharp fa-solid fa-magnifying-glass"></i></button>
</div>
</div>
Code Sandbox Link - since there is no styles.css the CSS is wrong but once your include that it should be formatted correctly.
Edit - changed HTML
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论