jquery - Javascript functions not being called -

my website uses nav bar toggles divs on , off go different "pages". buttons have stopped responding (nothing happens when clicked, , nothing appears in console), , have not been able figure out why.

my nav bar formatted so:

<a href="#" id="videosbutton">videos</a><br> <a href="#" id="graphicbutton">graphic design</a><br> <a href="#" id="webbutton">web design</a><br> 

my pages formatted so:

<div id="videos" class="page">videos page</div> 

the js is:

$('#videosbutton').click(function () { document.body.style.backgroundcolor="rgb(192,57,43)" $(".page").hide(); $('#videos').show(); }); 

for each button. js file being loaded, , can view in console, it's not issue that. have been struggling hours , @ loss. can me understand why nav bar not behaving expected?

edit: have moved external js , jquery before closing </body> tag, , problem persists. have put complete website @ http://hdf.bl.ee/test/index.html if thinks there issue not in code posted.

odds you're running code before element exists, , $("videosbutton") matches no elements, , hooks no handlers. make sure code in script tag after markup elements in html, or second-best approach, use jquery's ready callback. provided that, function called:

$('#videosbutton').click(function () {  document.body.style.backgroundcolor="rgb(192,57,43)"  $(".page").hide();  $('#videos').show();  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <a href="#" id="videosbutton">videos</a><br>  <a href="#" id="graphicbutton">graphic design</a><br>  <a href="#" id="webbutton">web design</a><br>  pages formatted so:    <div id="videos" class="page">videos page</div>