As a JavaScript beginner, I've encountered what seems to be a simple issue. I am trying to dynamically change the content of a div based on which button is clicked. This code snippet functions properly in JSfiddle, but when I transfer it to my local machine, the entire webpage loads instead. Even wrapping the JavaScript with $(window).load(function(){ ... }) does not solve this problem.
Here's my HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src= "http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<ul class="menu">
<li><a href="#about" class="menu-btn">About</a></li>
<li><a href="#contact" class="menu-btn">Contact</a></li>
<li><a href="#misc" class="menu-btn">Misc</a></li>
</ul>
<div id="about" class="menu-content">About</div>
<div id="contact" class="menu-content">Contact</div>
<div id="misc" class="menu-content">Misc</div>
</body>
</html>
My JavaScript (script.js):
$(window).load(function(){
var $content = $('.menu-content');
function showContent(type) {
$('div', $content).hide();
$('div[data-menu-content='+type+']').show();
}
$('.menu').on('click', '.menu-btn', function(e) {
showContent(e.currentTarget.hash.slice(1));
e.preventDefault();
});
showContent('about');
});