垂直选项卡菜单

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 -elements相应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(); 
}); 

演示

Try before buy