html page

html page (javascript css)


<style type="text/css"> 

.pageHeader {font-size: 15px;}
.tab_content  {font-size: 15px;}
ul.tabs li {background: #e1e1e1;}
ul.tabs li.active  {background: #e1e1e1;border-bottom: 10px solid #e1e1e1;}
.Hmenu li a    {font-size: 1 em;
    color: #000000;
    text-decoration: none;}

.Hmenu li a:hover    {color: #ffaa00;}

.Hmenu li    {display: inline;
    list-style-type: none;
    margin-right: 20px;}

.Hmenu ul    {margin: 0;
    padding: 0;}
</style>




html

            <div class="Hmenu">
                <ul  class="tabs">
                    <li class="pageHeader"><a href="#page1">Page1</a></li>
                    <li class="pageHeader"><a href="#page2">Page2</a></li>
                    <li class="pageHeader"><a href="#page3">Page3</a></li>
                    <li class="pageHeader"><a href="#page4">Page4</a></li>               
                </ul>
            </div>


            <div id="page1" class="tab_content">
                <div class="menu">
                    <ul>
                        <li><a href="#">Page1 Menu1.0</a></li>
                        <li><a href="#">Page1 Menu1.1</a></li>
                        <li><a href="#">Page1 Menu1.2</a></li>
                        <li><a href="#">Page1 Menu1.3</a></li>
                        <li><a href="#">Page1 Menu1.4</a></li>
                    </ul>
                </div>
            </div>
            <div id="page2" class="tab_content">
                <div class="menu">
                    <ul>
                        <li><a href="#">Page2 Menu2.0</a></li>
                        <li><a href="#">Page2 Menu2.1</a></li>
                        <li><a href="#">Page2 Menu2.2</a></li>
                        <li><a href="#">Page2 Menu2.3</a></li>
                        <li><a href="#">Page2 Menu2.4</a></li>
                    </ul>
                </div>
            </div>
            <div id="page3" class="tab_content">
                <div class="menu">
                    <ul>
                        <li><a href="#">Page3 Menu3.0</a></li>
                        <li><a href="#">Page3 Menu3.1</a></li>
                        <li><a href="#">Page3 Menu3.2</a></li>
                        <li><a href="#">Page3 Menu3.3</a></li>
                        <li><a href="#">Page3 Menu3.4</a></li>
                    </ul>
                </div>
            </div>
            <div id="page4" class="tab_content">
                <div class="menu">
                    <ul>
                        <li><a href="#">Page4 Menu4.0</a></li>
                        <li><a href="#">Page4 Menu4.1</a></li>
                        <li><a href="#">Page4 Menu4.2</a></li>
                        <li><a href="#">Page4 Menu4.3</a></li>
                        <li><a href="#">Page4 Menu4.4</a></li>
                    </ul>
                </div>
            </div>



<script>
$(function(){
    $('.tab_content').hide();
    $('ul.tabs li').click(function() { //click|mouseover
        var $this = $(this),    _clickTab = $this.find('a').attr('href');    
        $this.addClass('active').siblings('.active').removeClass('active');
        $(_clickTab).stop(false, true).fadeIn().siblings().hide();// fade out pagehead
        return false;
    }).find('a').focus(function(){
        this.blur();
    });   
    $("#page1").stop(false, true).fadeIn().siblings().hide();
});

</script>