treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Tabbed CSS menu links not working

  • I have the Round Out Tabs menu created for my site but the links are not working. Any suggestions on how I can make them work?

    Here is the code on my pages:

    .tabrow { text-align: center; list-style: none; margin: -50px 0 20px; padding: 0; line-height: 40px; height: 42px; overflow: hidden; font-size: 18px; font-family: verdana; position: relative; } .tabrow li { border: 1px solid #2b3688; background: #bec9d6; background: -o-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%); background: -ms-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%); background: -moz-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%); background: -webkit-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%); background: linear-gradient(top, #ECECEC 50%, #D1D1D1 100%); display: inline-block; position: relative; z-index: 0; border-top-left-radius: 20px; border-top-right-radius: 20px; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 #FFF; text-shadow: 0 1px #FFF; margin: 0 15px; padding: 0 20px; } .tabrow a { color: #blue; text-decoration: none; } .tabrow li.selected { background: #f2efa9; color: #0548b8; z-index: 2; border-bottom-color: #FFF; } .tabrow:before { position: absolute; content: " "; width: 100%; bottom: 0; left: 0; border-bottom: 5px solid #AAA; z-index: 1; } .tabrow li:before, .tabrow li:after { border: 5px solid #AAA; position: absolute; bottom: -1px; width: 5px; height: 5px; content: " "; } .tabrow li:before { left: -6px; border-bottom-right-radius: 6px; border-width: 0 1px 1px 0; box-shadow: 2px 2px 0 #D1D1D1; } .tabrow li:after { right: -6px; border-bottom-left-radius: 6px; border-width: 0 0 1px 1px; box-shadow: -2px 2px 0 #D1D1D1; } .tabrow li.selected:before { box-shadow: 2px 2px 0 #FFF; } .tabrow li.selected:after { box-shadow: -2px 2px 0 #FFF; }

    
    
    $(function() { $("li").click(function(e) { e.preventDefault(); $("li").removeClass("selected"); $(this).addClass("selected"); }); });
      <ul class="tabrow">
        <li><a href="index.php">Home</a></li>
             <li><a href="services.php">Services</a></li>
        <li><a href="about.php">About</a></li>
        <li><a href="contact.php">Contact</a></li>
        <li><a href="apply.php">Apply</a></li>
    </ul>
    

    Thanks, Anna

  • Please provide a link to the site or post a test case in http://codepen.io/pen/

  • Hi,

    The site link is http://factormycompany.com.

    Thanks, Anna

  • It looks like you have

    e.preventDefault()
    

    in your javascript - this is going to stop the browser from navigation to the next page.

  • OK. How do I correct that? Do I just delete that?

    Thanks, Anna

  • I tried to delete the e.preventDefault() but no changes.

    Thanks, Anna

  • I uploaded the file again and it seems to work fine. Thanks so much for the help.

    Anna