逛奔的蝸牛

我不聰明，但我會(huì)很努力

:: :: 新隨筆 :: :: :: 管理 ::

隨筆分類

搜索

最新評論

HTML：導(dǎo)航菜單 + Tab

<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 逛奔的蝸牛閱讀(1125) 評論(0) 編輯收藏引用所屬分類: 其他編程

只有注冊用戶登錄后才能發(fā)表評論。


相關(guān)文章: 網(wǎng)文：程序員的樣子其他編程：版本控制入門簡介 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 入門及技巧 Javascript：最漂亮的JavaScript圖表工具Highcharts C++：浮點(diǎn)數(shù)的存儲方式

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

青青草原综合久久大伊人导航_色综合久久天天综合_日日噜噜夜夜狠狠久久丁香五月_热久久这里只有精品

逛奔的蝸牛

隨筆分類

搜索

最新評論