Вертикальное меню вкладки

Question

У меня есть следующая настройка в качестве вертикального меню слева от моей страницы и содержимого справа. Существует один Div, связанный с каждой ссылкой, я хотел бы иметь возможность нажимать на ссылку меню и переключаться между различными div . Я изучаю jQuery и запустил следующий jQueryscript, но я застрял. Есть ли способ сделать это с помощью CSS или кто-то может мне помочь.

HTML:

<ul id="nav"> 
     <li id="link-0">Home</li> 
     <li id="link-1">Services</li> 
     <li id="link-2">Products</li> 
     <li id="link-3">Contact</li> 
     <li id="link-4">About</li> 
    </ul> 
</div> 

<div id="container"> 
    <div id="tab-0" class="menus"></div> 
     <div id="tab-1"class="menus">Page Content 1</div> 
     <div id="tab-2"class="menus">Page Content 2</div> 
     <div id="tab-3"class="menus">Page Content 3</div> 
     <div id="tab-4"class="menus">Page Content 4</div> 
</div> 

CSS:

#navigation 
{ float:left; 
width:20%; 
height:720px; 
border:1px solid #000; 
margin-top:20px; } 


#navigation h1 
{ font-family: 'Open Sans Condensed', sans-serif; 
font-size:3.0vw; 
border:0px solid #F00; 
text-transform:uppercase; 
font-weight:bold; 
text-shadow: #aaa 0.1em 0.1em 0.2em; 
-moz-text-shadow: #aaa 0.1em 0.1em 0.2em; 
-ms-text-shadow: #aaa 0.1em 0.1em 0.2em; 
-webkit-text-shadow: #aaa 0.1em 0.1em 0.2em; 
text-align:center; 
margin-top:50px; } 


#nav { width:20%; 
border:0px solid #f00; 
position:absolute; 
list-style:none; 
height:400px; 
top:150px; } 


#nav li {width:80%; 
border:0px solid #000; 
position:relative; 
display:block; 
height:60px; 
float:right; 
top:50px; } 


#nav li a 
{ display:block; 
text-decoration:none; 
font-size:1.3vw; 
color:#aaa; 
padding-left:10px; } 


#nav li a:hover 
{ color:#000; } 


#social-network 
{ width:90%; 
height:40px; 
border:0px solid #000; 
margin-top:460px; 
margin-left:15px; } 


#social-network img 
{ width:40px; 
height:40px; 
margin:0 0 0 20px ; } 


#tab-0 
{ float:left; 
width:80%; 
height:720px; 
border:1px solid #000; 
margin-top:20px; } 



#tab-1 
{ float:left; 
width:80%; 
height:720px; 
border:1px solid #000; 
background-color:#090; 
display:none; } 



#tab-2 
{ float:left; 
width:80%; 
height:720px; 
border:1px solid #000; 
background-color:#00F; 
display:none; } 



#tab-3 
{ float:left; 
width:80%; 
height:720px; 
border:1px solid #000; 
background-color:#FF0; 
display:none; } 



#tab-4 
{ float:left; 
width:80%; 
height:720px; 
border:1px solid #000; 
background-color:#C6F; 
display:none; } 

JQuery:

$(document).ready(function() { 
    $('.menus').hide(); 
    $('#link-1').click(function() { 
     $('#tab-0').hide(); 
     $('#tab-1').show(); 
    }); 
}); 

Answer 1

Я бы сказать, чтобы сделать код более последовательного использования a -элементов в вашей навигации с соответствующими href -attributes для каждого контейнера, как:

<ul id="nav"> 
    <li><a href="#tab-1">Home</a></li> 
    <li><a href="#tab-2">Home</a></li> 
</ul> 

также обновить JavaScript, чтобы отразить это:

var content = $('.menus'); 
$('#nav a').click(function() { 
    content.hide(); 
    content.filter(this.hash).show(); 
}); 

Demo

Try before buy