如何创建页内水平导航锚定系统？

如果你看看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

如何创建页内水平导航锚定系统？

回答

相关问题