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

时间：2022-12-26 16:43:19

//下拉菜单效果和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: #999;
            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(1000);
            })
            $("#tab-top ul :first").click(function () {
                $(this).addClass("on").siblings().removeClass("on");
                $(".content:eq(0)").show(1000);
                $(".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="images/order.jpg"/></div>
    <div class="content" style="display:none;"><img src="images/tuan.jpg"/></div>
</div>
</body>
</html>

 

标签：

相关文章