Навигация и отображение боковой панели на правой стороне

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

Скорректированная разметку слегка для вкладок, и измененные идентификаторы классов для укладки:

<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

Вы хотите к HREF к тексту в боковой панели, чтобы связать, на страницу Парижа, когда вы щелкаете Париж и Лондон страницу при нажатии кнопки Лондона. Например

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

и

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