垂直選項卡菜單

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