思思久久99热只有频精品66,日韩中文久久,国产精品久久久久9999

<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Title</title>

    <style type="text/css">
    html, body, table {
        font-family: arial;
        font-size: 14px;
    }

    html {
        background: url(images/stom.gif);
    }

    .tab .tab-menu {
        height: 37px;
        background: url(images/neck.gif);
    }

    .tab .tab-menu ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .tab .tab-menu li {
        margin: 6px 0px 0px;
        padding: 0px 11px 0px 0px;
        height: 25px;
        float: left;
        font-size: 14px;
        font-weight: bold;
        text-shadow: 0px 1px 1px white;
    }

    .tab .tab-menu li a {
        cursor: pointer;
        height: 25px;
        line-height: 25px;
        padding: 0px 20px 0px 27px;
        display: block; /* inline-block效果不好 */
    }

    .tab .tab-menu li.over {
        opacity: 0.6;
    }

    .tab .tab-menu li.active {
        opacity: 1.0;
    }

    .tab .tab-menu li.active, .tab .tab-menu li.over {
        background: url(images/nav-bg-r.gif) no-repeat center right;
    }

    .tab .tab-menu li.active a, .tab .tab-menu li.over a {
        color: white;
        text-shadow: 0px 1px 1px black;
        background: url(images/nav-bg-l.gif) no-repeat left center;
    }

    .tab .tab-box {
        min-height: 100px;
        border: 1px solid #D3D8DF;
        border-top: none;
        background: white;
    }

    .hide {
        display: none;
    }
    </style>

    <script src="js/jquery.js"></script>
    <script type="text/javascript">
    $(function() {
        var $menuLis = $(".tab .tab-menu li");
        $menuLis.hover(function() {
            $(this).addClass("over");
        }, function() {
            $(this).removeClass("over");
        }).click(function() {
            $(this).addClass("active").siblings().removeClass("active");
            var index = $menuLis.index(this);
            $(this).parent().parent().siblings(".tab-box")
            .children("div").hide().eq(index).show();
        });
    });
    </script>
</head>

<body>
    <div class="tab">
        <div class="tab-menu">
            <ul>
                <li class="active"><a>Home</a></li>
                <li><a>Portfolio</a></li>
                <li><a>Blog</a></li>
                <li><a>About</a></li>
                <li><a>Goodies</a></li>
            </ul>
        </div>
        <div class="tab-box">
            <div>Home</div>
            <div class="hide">Portfolio</div>
            <div class="hide">Blog</div>
            <div class="hide">About</div>
            <div class="hide">Goodies</div>
        </div>
    </div>
</body>
</html>

From: http://www.stucel.com/blog

posted on 2010-09-24 03:33 逛奔的蝸牛閱讀(1118) 評(píng)論(0) 編輯收藏引用所屬分類(lèi): 其他編程

只有注冊(cè)用戶(hù)登錄后才能發(fā)表評(píng)論。
【推薦】100%開(kāi)源！大型工業(yè)跨平臺(tái)軟件C++源碼提供，建模，組態(tài)！

相關(guān)文章: 網(wǎng)文：程序員的樣子其他編程：版本控制入門(mén)簡(jiǎn)介 JavaScript：10 款強(qiáng)大的JavaScript圖表圖形插件推薦 Html：Sublime Text 2 使用的主題：Black Perl Html：Sublime Text 2 使用的主題：Espresso Soda Html：Sublime Text 2 的設(shè)置 Html：Sublime Text 2 – Useful Shortcuts (Mac OS X) Html：Sublime Text 2 入門(mén)及技巧 Javascript：最漂亮的JavaScript圖表工具Highcharts C++：浮點(diǎn)數(shù)的存儲(chǔ)方式

網(wǎng)站導(dǎo)航: 博客園 IT新聞 BlogJava 博問(wèn) Chat2DB 管理

逛奔的蝸牛

隨筆分類(lèi)

搜索

最新評(píng)論