Code

jquery仿微软tab页。
一款jquery仿微软的tab页。
效果预览
代码
1.在body里加入如下HTML代码:

<div class="ms_tabContainer">
    <div class="ms_tabMenu">
        <a href="javascript:void(0);" class="a_on">标签一</a>
        <a href="javascript:void(0);" class="a_off">标签二</a>
        <a href="javascript:void(0);" class="a_off">标签三</a>
        <a href="javascript:void(0);" class="a_off">标签四</a>
        <a href="javascript:void(0);" class="a_off">标签五</a>
        <a href="javascript:void(0);" class="a_off">标签六</a>
        <div class="ms_tabMenu_end"></div>
    </div>
    <div class="ms_tabContents">
        <div class="ms_tabContent">
            标签一内容
        </div>
        <div class="ms_tabContent">
            标签二内容
        </div>
        <div class="ms_tabContent">
            标签三内容
        </div>
        <div class="ms_tabContent">
            标签四内容
        </div>
        <div class="ms_tabContent">
            标签五内容
        </div>
        <div class="ms_tabContent">
            标签六内容
        </div>
    </div>
    <div style="clear:both"></div>
    <!--最后清除浮动-->
</div>

2.在head标签内加入css:

<style type="text/css">
    .ms_tabContainer
    {
        background-color: #ffffff;
        width:900px;
        height:376px;
        overflow:hidden;
    }
    .ms_tabMenu
    {
        float: left;
    }
    .ms_tabMenu .a_off
    {
        color: #000000;
        display: block;
        padding: 9px 10px 10px 10px;
        text-align: right;
        width: 158px;
        background: url("images/ms_tabs_bg.png") repeat-y left center;
    }
    .ms_tabMenu .a_on
    {
        border-bottom: 1px solid #DFE8EF;
        border-left: 1px solid #DFE8EF;
        border-top: 1px solid #B8CCDC;
        width: 158px;
        padding: 8px 10px 9px 9px;
        background: #ffffff none;
        color: #07679A;
        display: block;
        text-align: right;
    }
    .ms_tabMenu_end
    {
        height: 178px;
        width: 178px;
        background: url("images/ms_tabs_bg_end.png") no-repeat;
        _background:none;
        _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/ms_tabs_bg_end.png" ,sizingMethod="crop");
    }
    .ms_tabContents
    {
        margin-left: 180px;
        padding: 10px 10px 10px 15px;
    }
    .ms_tabContents .ms_tabContent
    {
        display: none;
    }
</style>

3.在body底部引入js文件:

<script src="http://img.china-dirs.com.cn/public/js/jquery.js" type="text/javascript"></script>

4.在body底部添加js代码:

<script type="text/javascript">
    $(function() {
        $(".ms_tabContents .ms_tabContent").eq(0).show();
        var hoverTimer;
        $(".ms_tabMenu a").each(function() {
            var menu = $(this);
            menu.hover(function() {
                hoverTimer = setTimeout(function() {
                    var index = menu.index();
                    menu.addClass("a_on").siblings("a").removeClass("a_on").addClass("a_off");
                    $(".ms_tabContents .ms_tabContent").eq(index).show().siblings().hide();
                }, 400);
            }, function() {
                clearTimeout(hoverTimer);
            });
        });
    });
</script>