2015-10-08 116 views
3

我想要顯示側欄導航(左側菜單鏈接)和右側每個單擊的垂直菜單顯示的內容。右側的側欄導航和顯示內容

例如可以說我有這個左邊的菜單:

  • 倫敦
  • 紐約

如果我點擊倫敦鏈接內容/頁應顯示在右側,同樣爲紐約聯繫。

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>

+0

您是否在尋找頁面標籤? – Stickers

+0

@Pangloss是的即時通訊尋找在頁面標籤使用HTML和CSS謝謝! – Sjay

+0

如果您需要純CSS,請參閱[這裏](http://stackoverflow.com/questions/25943488/how-can-i-make-tabs-with-only-css),但使用jQuery更容易,張貼。 – Stickers

回答

5

略爲調整爲標籤的標記,並改變了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

+0

非常感謝你改進了我的代碼,並滿足了我的要求謝謝你寶貴的時間和解決我的問題謝謝! – Sjay

1

你要A HREF在側邊欄鏈接文字,巴黎頁面當您單擊巴黎和倫敦頁面當你點擊倫敦。例如

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

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

謝謝你@ C.McCarthy .. – Sjay

+0

沒問題,祝你有個美好的一天 –