如何創建頁內水平導航錨定系統？

如果你看看http://www.jumo.com/about，你會注意到nav上的三個鏈接被設置爲錨點。查看代碼，我們可以發現，負責這個CSS是：如何創建頁內水平導航錨定系統？

/* ?OPTIONS? */ 
.section_options { 
    border-bottom:1px solid #94CB41; 
    display:none; 
    font-size:14px; 
    margin-bottom:25px; 
    margin-top:0; 
    padding-left:10px; 
    width:98%; 
    z-index:20; 
    line-height: 21px; 
} 

.section_options a { 
    border:1px solid #cccccc; 
    border-bottom:0px solid #cccccc; 
    color:#555555; 
    margin-right:9px; 
    opacity:0.6; 
    padding:9px 14px 2px; 
} 

.section_options a.selected { 
    background:white; 
    font-weight:bold; 
    color:#555555; 
    opacity:1; 
    padding-bottom:3px; 
    border:1px solid #94CB41; 
    border-bottom: 1px solid white; 
    margin-left:4px; 
}

以及這在HTML

<style> 
#about, #team, #contact { display:none; } 
</style>

去進一步下降到HTML中，我們可以看到這些節被稱爲 -

<div class="section_options" id="section_nav" style="display: block;"> 
<a href="#about" class="about selected">About Us</a> 
<a href="#team" class="team">Our Team</a> 
<a href="#contact" class="contact">Contact</a> 
</div> 
<div id="about" class="section"> 
and 
<div id="team" class="section"> 
and 
<div id="contact" class="section">

然而，當我使用這個代碼我只是得到所顯示的三個選項卡，但沒有別的，和錨鏈接什麼也不做。我知道如果將{display：}更改爲阻止或內聯，它將顯示內容，但鏈接的選擇不起作用，錨定不起作用。有人知道爲什麼嗎？我有一種感覺，它與section_nav沒有在CSS中聲明有關，但不確定。

謝謝！

來源

2011-01-11 sthomps

您正在查看的頁面使用JavaScript在選項卡之間切換，並將selected類應用於/從活動選項卡標題中刪除。如果你想看看他們是怎麼做的，你可以下載他們的腳本。

來源

2011-01-11 19:26:34 Jacob

謝謝你，現在看看。 – sthomps 2011-01-11 19:35:13

如何創建頁內水平導航錨定系統？

回答

相關問題