I have been stuck on this for ages, here is my code so far:

```
<html>
    <head>
        <script src="http://mihaifrentiu.com/wp-content/themes/mf/js/jquery_1.7.1.min.js" type="text/javascript"></script>
        <style type="text/css">
            body, html, div, ul, li, a {
                margin:0;
                padding:0;
            }
            body {
                font-family:arial;
                font-size:12px;
                color:#000000;

            }
            .clear {
                clear:both;
            }
            ul {
                list-style:none;
                position:relative;
                z-index:2;
                top:1px;
                display:table;
                border-left:5px solid #808080;
            }
            ul li {
                float:left;
            }
            ul li a {
                background:#000000;
                color:#000000;
                display:block;
                padding:6px 15px;
                text-decoration:none;
                border-right:100px solid #000000;
                border-top:1px solid #000000;
                border-right:3px solid #808080;
            }
            ul li a.selected {
                border-bottom:1px solid #808080;
                color:#000000;
                background:#808080;
            }
            h1 {
                display:block;
                width:600px;
                margin:0 auto;
                padding:200px 0;
                color:#000000;
            }
            #navigation {
                width:602px;
                margin: 0 auto;
            }
            #content {
                width:600px;
                margin:0 auto;
                height:200px;
                background:#ffffff;
                border:1px solid #000000;
                z-index:1;
                text-align:center;
                padding:10px 0;
            }
            #logo {
                width:600px;
                margin:0 auto;
                padding:10px 0;
                text-align:right;
            }
        </style>
    </head>

    <body>
        <div id="navigation">
            <ul>
                <li><a href="javascript:void(1);" id="tab1"><font color="white">Tab 1</a></li>
                <li><a href="javascript:void(2);" id="tab2"><font color="white">Tab 2</a></li>
                <li><a href="javascript:void(3);" id="tab3"><font color="white">Tab 3</a></li>
                <li><a href="javascript:void(4);" id="tab4"><font color="white">Tab 4</a></li>
                <li><a href="javascript:void(5);" id="tab5"><font color="white">Tab 5</a></li>
            </ul>
            <div class="clear"></div>
        </div>
       <div id="content">
            <p id="content_changer">You have selected Tab 1</p>
            <p>See the page source for full code</p>
        </div>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#navigation ul a').click(function() {
                    $('#navigation ul a').removeClass('selected');
                    $(this).addClass('selected');
                    $('#content_changer').html('You have selected ' + $(this).html());
                });
            });
        </script>
    </body>
</html>

```

I can not figure out how to get one of these tabs menu thing to work, I have tried so many different methods but nothing will work.