下拉菜单效果和tab选项卡切换

//下拉菜单效果和tab选项卡切换。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>当当网我的订单页</title>

    <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>

    <style type="text/css">

        * {

            margin: 0px;

            padding: 0px;

            font-size: 12px;

        }

        a {

            color: #;

            text-decoration: none;

        }

        body {

            background: #fff url(images/dangbg.jpg) no-repeat;

        }

        ul {

            list-style: none;

        }

        .pos {

            position: absolute;

        }

        #menu {

            left: 931px;

            top: 5px;

        }

        #menu li {

            display: block;

            height: 20px;

            line-height: 20px;

            background-color: #fff;

            padding: 4px;

        }

        #tabs {

            left: 222px;

            top: 237px

        }

        #tab-top {

            height: 30px;

            line-height: 30px;

            padding-left: 20px;

            border-bottom: 1px solid #15B69A;

        }

        #tab-top ul li {

            display: block;

            float: left;

            padding: 0px 15px;

            border: 1px solid #C6C5C5;

            border-bottom: 1px solid #15B69A;

            background-color: #F0F0F0;

            margin-right: 10px;

            margin-top: -1px;

            cursor: pointer;

        }

        #tab-top ul li.on {

            border: 1px solid #15B69A;

            border-top: 2px solid #15B69A;

            border-bottom: none;

            background-color: #F0FCF1;

        }

    </style>

    <script type="text/javascript">

        $(function () {

            var $ul = $("#menu-ul")

            $("#menu:first").hover(function () {

                $ul.show();

            }, function () {

                $ul.hide();

            })

            $("#tab-top ul :last").click(function () {

                $(this).addClass("on").siblings().removeClass("on");

                $(".content:eq(0)").hide();

                $(".content:eq(1)").show();

            })

            $("#tab-top ul :first").click(function () {

                $(this).addClass("on").siblings().removeClass("on");

                $(".content:eq(0)").show();

                $(".content:eq(1)").hide();

            })

        })

    </script>

</head>

<body>

<!-- 下拉菜单 -->

<div id="menu" class="pos"><a href="#">我的当当</a>

    <ul id="menu-ul" style="display:none;">

        <li><a href="#">我的订单</a></li>

        <li><a href="#">我的收藏</a></li>

        <li><a href="#">我的礼品卡</a></li>

        <li><a href="#">我的积分</a></li>

        <li><a href="#">我的余额</a></li>

    </ul>

</div>

<!-- tabs -->

<div id="tabs" class="pos">

    <div id="tab-top">

        <ul>

            <li class="on">我的订单</li>

            <li>我的团购订单</li>

        </ul>

    </div>

    <div class="content"><img src="data:images/order.jpg"/></div>

    <div class="content" style="display:none;"><img src="data:images/tuan.jpg"/></div>

</div>

</body>

</html>
巴特西

下拉菜单效果和tab选项卡切换

最新文章

热门文章
