右侧的侧栏导航和显示内容

Question

我想要显示侧栏导航（左侧菜单链接）和右侧每个单击的垂直菜单显示的内容。

例如可以说我有这个左边的菜单：

• 伦敦
• 纽约

如果我点击伦敦链接内容/页应显示在右侧，同样为纽约联系。

http://jsfiddle.net/J5nCS/717/

#header { 
 
    background-color:black; 
 
    color:white; 
 
    text-align:center; 
 
    padding:5px; 
 
} 
 
#nav { 
 
    line-height:30px; 
 
    background-color:#eeeeee; 
 
    height:300px; 
 
    width:100px; 
 
    float:left; 
 
    padding:5px;   
 
} 
 
#section { 
 
    width:350px; 
 
    float:left; 
 
    padding:10px;   
 
} 
 
#footer { 
 
    background-color:black; 
 
    color:white; 
 
    clear:both; 
 
    text-align:center; 
 
    padding:5px;  
 
}

<div id="header"> 
 
<h1>City Gallery</h1> 
 
</div> 
 

 
<div id="nav"> 
 
London<br> 
 
Paris<br> 
 
Tokyo<br> 
 
</div> 
 

 
<div id="section"> 
 
<h2>London</h2> 
 
<p> 
 
London is the capital city of England. It is the most populous city in the United Kingdom, 
 
with a metropolitan area of over 13 million inhabitants. 
 
</p> 
 
<p> 
 
Standing on the River Thames, London has been a major settlement for two millennia, 
 
its history going back to its founding by the Romans, who named it Londinium. 
 
</p> 
 
</div> 
 

 
<div id="footer"> 
 
Copyright © footer.com 
 
</div>

Answer 1

略为调整为标签的标记，并改变了ID，以班为造型：

<div class="header"> 
    <h1>City Gallery</h1> 
</div> 
<div class="nav"> 
    <ul> 
     <li><a href="#section-london">London</a></li> 
     <li><a href="#section-paris">Paris</a></li> 
    </ul> 
</div> 
<div id="section-london" class="tab-content"> 
    <h2>London</h2> 
    <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> 
</div> 
<div id="section-paris" class="tab-content"> 
    <h2>Paris</h2> 
    <p>Paris, France's capital, is a major European city and a global center for art, fashion, gastronomy and culture. Its picturesque 19th-century cityscape is crisscrossed by wide boulevards and the River Seine. </p> 
</div> 
<div class="footer">Footer</div> 

而jQuery的部分：

$(document).ready(function() { 
    $('.nav ul li:first').addClass('active'); 
    $('.tab-content:not(:first)').hide(); 
    $('.nav ul li a').click(function (event) { 
     event.preventDefault(); 
     var content = $(this).attr('href'); 
     $(this).parent().addClass('active'); 
     $(this).parent().siblings().removeClass('active'); 
     $(content).show(); 
     $(content).siblings('.tab-content').hide(); 
    }); 
}); 

jsfiddle

Answer 2

你要A HREF在侧边栏链接文字，巴黎页面当您单击巴黎和伦敦页面当你点击伦敦。例如

<a href="london.html">London</a><br> 

和

<a href="newyork.html">Paris</a><br>