How do I have a navbar and body loaded from other html and update by the navbar?
Question
So I have an index page with some bootstrap code to make the columns resize. I want to have a navbar on the left side and the body for the rest. However, I want to have more than one navbar. I want to create a few categories across the top and depending on which one of those you choose, it will load a navbar and a default body page into the bootstrap columns. It's for a tabletop RPG that I am writing.
So if I have Character Creation, Combat, Magic, Vehicles, etc. across the top and you click on Character Creation then it will load the navbar on the left for character creation and the main body would have a default overview page. If you click a link in the navbar, I want it to change the page on the main body.
I know how to do this the slow way and create a huge number of pages with all the navbars and such already in there. If I update one section, I have to go through and update dozens of pages.
I am trying to teach myself javascript and I know that I can do it in there but I am not sure how.
I can't seem to find an example of this to figure out the coding. I assume that there would be a variable that is being changed by the navbar when you click on the navbar links? Not sure.
This is what I have for the test index page:
<!DOCTYPE html>
<html>
<head>
<title>Main Page</title>
<meta name="viewport" content="width = device-width, initial-scale = 1">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<h1>This is Test 4</h1>
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<div class="thumbnail">
<div class="caption">
<div class="load-html" id="Navbar" data-source="navBar.html"></div>
</div>
</div>
</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
<div class="thumbnail">
<div class="caption">
<div class="load-html" id="mainBody" data-source="test3.html"></div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(function () {
$(".load-html").each(function () {
$(this).load(this.dataset.source);
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
1 answers
solution1
0 2019-09-25 04:50:00
I have written a basic JS example for you below which will work ok in a small project, however it would not scale well in a larger project. You would be better learning a framework like vue.js and using the router along side it, or just using a router like the one Jon B linked you to in his comment above.
Anyway, something this will get you going. I have included a couple tricks which you will likely use in the future, for example data attributes, foreach loops and querySelectors and updating the dom. Let me know if you have any questions and enjoy Javascript:)
// Get all the nav items var navItems = document.querySelectorAll(".nav-item"); var sideNavTitelEl = document.getElementById('side-nav-title'); var containersEls = document.querySelectorAll(".content"); // selected will be set to the nav item that was clicked on var selected = 0; // Add an event listener to all the nav items navItems.forEach(addingEventListener); function addingEventListener(item, index) { item.addEventListener('click', function() { // the item is what nav item we clicked on, // lets set the side nav and main container value to be what was clicked on sideNavTitelEl.innerHTML = item.innerHTML; // Now lets update the main page container selected = parseInt(item.dataset.value); // We use the displayNone to show / hide a container. // In a large scale project, you will want to begin to look at using a router, as this will speed // up your site. For this example, it will work fine as is here. // Hide and show the correct content on page containersEls.forEach(hideContent); }); } function hideContent(item, index) { if(index === selected) { // we want to show this container item.classList.remove('displayNone'); } else { // hide the container item.classList.add('displayNone'); } }
body { box-sizing: border-box;; margin: 0; padding: 0; position: relative; }.top-nav { width: 100%; height: 60px; display: flex; align-items: center; justify-content: center; }.logo { margin-left: 30px; margin-right: auto; }.nav-item { margin-left: auto; margin-right: 30px; }.nav-item:hover { cursor: pointer; }.side-nav { width: 200px; height: calc(100vh - 60px); position: absolute; top: 60px; left: 0; display: flex; align-items: center; flex-direction: column; }.main-container { width: 200px; height: 200px; background-color: yellow; margin-left: 200px; width: calc(100% - 200px); height: calc(100vh - 60px); display: flex; justify-content: center; align-items: center; }.content { width: 100%; height: calc(100vh - 60px); display: flex; justify-content: center; align-items: center; }.displayNone { display: none; }.container-one { background-color: red; }.container-two { background-color: green; }.container-three { background-color: blue; }
<div class="top-nav"> <p class="logo">Home</p> <p class="nav-item item-1" data-value='0'>Item 1</p> <p class="nav-item item-2" data-value='1'>Item 2</p> <p class="nav-item item-3" data-value='2'>Item 3</p> </div> <div class="side-nav"> <p id="side-nav-title">Home</p> <p>Something</p> <p>Something</p> <p>Something</p> </div> <div class="main-container"> <div class="content container-one" data-value='1'> <h1>Container 1</h1> </div> <div class="content container-two displayNone" data-value='2'> <h1>Container 2</h1> </div> <div class="content container-three displayNone" data-value='3'> <h1>Container 3</h1> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.