Looking to change the image upon clicking on any of the navbar items.
Emulating the navigation bar behavior from this website :
This is my current progress :
The HTML file :
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="StyleSheet.css" />
<script src="scripts/jquery-1.11.3.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!--JS Scripts-->
<script src="scripts/onClick.js"></script>
<title>Title</title>
</head>
<body>
<div id="page-container">
<div id="header">
<h1><a id="name" href="Link_1.html">Test</a></h1>
</div>
<div id="slides-zone">
<img id="image" src="images/1.jpg" alt="1" />
</div>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="selected"><a href="Link_1.html" onclick="testFunction();">Link 1</a></li>
<li><a href="Link_2.html">Link 2</a></li>
</ul>
</div>
</nav>
</div>
</body>
</html>
My script to switch images upon clicking a nav item :
var testFunction = function () {
var element = document.getElementById('slides-zone');
var img_to_replace = document.getElementById('image');
var new_img = document.createElement("img");
new_img.setAttribute('src', 'images/2.jpeg');
new_img.setAttribute('alt', 'image_2');
new_img.setAttribute('id', 'image')
element.replaceChild(new_img, img_to_replace);
return true;
}
Hoping for a Javascript-only solution, without the use of any framework.
Appreciate any help! Thanks