Question

如果您查看http://www.jumo.com/about，您会注意到导航栏上的三个链接被设置为锚点。查看代码，我们可以发现负责此的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：}更改为阻止或内联它将显示内容，但链接的选择不起作用，锚定无效。有人知道为什么吗？我觉得它与未在CSS中声明的section_nav有关，但不确定。

谢谢！

Answer 1

您正在查看的页面使用JavaScript在选项卡之间切换，并将selected类应用于活动选项卡标题/从活动选项卡标题中删除。如果你想看看他们是怎么做的，你可以下载他们的脚本。

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

1 个答案: