How do I create an in-page horizontal nav anchoring system?

If you take a look at http://www.jumo.com/about, you will notice that the three links on the nav are set up as anchors. Looking at the code, we can find that the CSS responsible for this is:

    /* ?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;
}

as well as this in the HTM开发者_开发知识库L

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

Going further down into the HTML, we can see where these sections are called -

<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"> 

Yet when I apply this code I just get the three tabs being displayed, but nothing else,and the anchor links do nothing. I know if I change the {display:} to block or inline it will display the content, but the selection of the links does not work, the anchoring has no effect. Does anyone know why this is? I have a feeling it has something to do with the section_nav not being declared in the CSS, but not sure.

Thank you!

---

The page you are looking at uses JavaScript to switch between tabs and apply/remove the selected class to/from the active tab header. If you want to see how they do it, you can download their scripts.