Hi, I have a problem...
Im new to coding and creating a website...I have managed to get a bit of hide/show jquery code working to shift between tabs that i want to style up. But since the jquery works, nothing is happening when changing anything to with #tabs
Here is my html:
<html>
<head>
<title>The Rock & Roll Project: </title>
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="rnrARTISTS.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="global.js"></script>
</head>
<body>
<div id="header">
<div id="logo">
<img src="./rockrollimages/rnr_logo2.gif">
</div>
<div id="headerimage">
<img src="./rockrollimages/headerimage1.JPG">
</div>
</div>
<div id="navbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">History of Rock & Roll</a></li>
<li><a href="#">Rock & Roll Legends</a></li>
<li><a href="#">Record Labels</a></li>
<li><a href="#">Login</a></li>
<li><a href="#">Register</a></li>
</ul>
</div>
<h1>Rock & Roll Legends</h1>
<ul id="tabs">
<li><a href="#rockabilly" id="rockabilly_link">Rockabilly</a></li>
<li><a href="#hillbilly" id="hillbilly_link">Hillbilly</a></li>
<li><a href="#skiffle" id="skiffle_link">Skiffle</a></li>
<li><a href="#uk" id="uk_link">UK</a></li>
</ul>
<div id="content">
<div id="rockabilly">
<h2>Rockabilly Artists</h2>
<img src="">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum </p>
</div>
<div id="hillbilly">
<h2>Hillbilly Artists</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum </p>
<img src="">
</div>
<div id="skiffle">
<h2>Skiffle Artists</h2>
<img src="">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum </p>
</div>
<div id="uk">
<h2>UK Artists</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum </p>
<img src="">
</div>
</div>
<div id="footerlinks">
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Privacy & Cookies</a></li>
<li><a href="#">Terms Of Use</a></li>
<li><a href="#">Accessibility</a></li>
</ul>
</div>
</body>
</html>
and my CSS:
html {
background-image: url('./rockrollimages/background.jpg'); background-repeat: repeat-y repeat-x;
}
body {
margin: 0;
}
#header {
height: 175px; width: 100%;
border-top: 5px solid black;
}
#logo {
height:100%; width: 245px; float: left;
border-right: 5px solid black;
}
#logo img {
height: 90%; width: auto;
border: 5px solid #8B0000;
margin: 3px 0 0 3px;
}
#headerimage img {
float: right;
height: 175px; width: 1015px;
}
#navbar {
background-color: #8B0000;
height: 70px; width: 100%;
border-top: 5px solid black;
border-bottom: 5px solid black;
}
#navbar ul {
padding: 5px 60px 0 0;
list-style-type: none;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
#navbar ul li {
display: inline;
margin-left: 50px;
font-size: 20px;
padding: 12px;
}
#navbar ul li a {
text-decoration: none;
color: #fff;
background-color: #8B0000;
}
#navbar ul li a:hover {
color: #000;
background-color: #8B0000;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
float: right;
margin-right: 5%;
margin-top: 9px;
padding: 3px;
border: 5px solid #8B0000;
font-variant: small-caps;
}
#tabs ul {
list-style-type: none;
}
#tabs li {
display: inline;
font-size: 40px;
border: 3px solid #8B0000;
padding: 2px;
border-bottom: 0px;
}
#tabs li a {
color: black;
text-decoration: none;
}
#content{
height: 100%; width: auto;
}
#rockabilly {
border: 3px solid black;
}
#hillbilly {
border: 3px solid red;
}
#skiffle {
border: 3px solid green;
}
#uk {
border: 3px solid yellow;
}
#tabs li {
display: inline;
font-size: 40px;
border: 3px solid 8B0000;
padding: 8px;
border-bottom: 0px;
}
#tabs li a {
color: black;
text-decoration: none;
}
#footerlinks {
position: fixed;
bottom: 0;
width: 100%;
background-color: rgba(139,0,0,0.
;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform: uppercase;
border-top: 5px solid black;
border-bottom: 5px solid black;
}
#footerlinks ul {
margin: 0;
padding: 5px;
list-style-type: none;
text-align: center;
}
#footerlinks ul li {
display: inline;
font-size: 12px;
}
#footerlinks ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
}
#footerlinks ul li a:hover {
color: #000;
}
and my Jquery script:
<script type="text/javascript">
$(document).ready(function(){
$("#rockabilly_link").click(function(){
$("#rockabilly").show();
$("#hillbilly").hide();
$("#skiffle").hide();
$("#uk").hide();
});
$("#hillbilly_link").click(function(){
$("#rockabilly").hide();
$("#hillbilly").show();
$("#skiffle").hide();
$("#uk").hide();
});
$("#skiffle_link").click(function(){
$("#rockabilly").hide();
$("#hillbilly").hide();
$("#skiffle").show();
$("#uk").hide();
});
$("#uk_link").click(function(){
$("#rockabilly").hide();
$("#hillbilly").hide();
$("#skiffle").hide();
$("#uk").show();
});
});
</script>
its probably something simple, but i cant figure it out 
any help would be much appreciated.. cheers! also new to forums so any help on making questions easier to ask on here without posting a whole heap of code 