实现一个菜单栏鼠标滑过的效果

@{
    Layout = null;
}

<!DOCTYPE html>
@using Webdiyer.WebControls.Mvc;
@using SuperMarketClientMvc.Models;
@model PagedList<GoodsPurchase>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/layer-v2.4/layer/layer.js"></script>
    <style>
        #sp {
            width: 160px;
            height: 300px;
            background-color:#808080;
            text-align: center;
            line-height: 80px;
            margin-top: 40px;
            float: left;
        }
        a {
            text-decoration: none;
            font-weight: bold;
            color: red;
            font-weight:bold;
        }
        #spcg {
            width: 1200px;
            height: 600px;
            text-align: center;
            line-height: 80px;
            margin-top: 40px;
            margin-left: 10px;
            float: left;
            background-image: url(/img/11.jpg);
            
        }
        #sc {
            width: 1200px;
            height: 600px;
            text-align: center;
            line-height: 80px;
            margin-top: 40px;
            margin-left: 10px;
            float: left;
            background-image: url(/img/11.jpg);
        }
        #ck {
            width: 1200px;
            height: 600px;
            text-align: center;
            line-height: 80px;
            margin-top: 40px;
            margin-left: 10px;
            float: left;
            background-image: url(/img/11.jpg);
        }
        li{
            list-style:none;
        }
        #goodsxz {
            width: 130px;
            font-size: 10px;
            margin-top: 20px;
        }
        #Puchase_cz {
            background-color: #ffffff;
            text-align:center;
            width: 150px;
            height: 80px;
            float: right;
            z-index: 10;
            line-height:80px;
            position:absolute;
            left:115px;
            top:120px;
        }
        #goods_xs {
            background-color: #ffffff;
            text-align: center;
            width: 150px;
            height: 80px;
            float: right;
            z-index: 10;
            line-height: 80px;
            position: absolute;
            left: 115px;
            top: 200px;
        }
        #goods_ck {
            background-color: #ffffff;
            text-align: center;
            width: 150px;
            height: 80px;
            float: right;
            z-index: 10;
            line-height: 80px;
            position: absolute;
            left: 115px;
            top: 285px;
        }
        a.Houver{
            color:#ff00dc;
        }
    </style>
    <script>
        $(function () {
            //$("#spcg").hide();
            $("#sc").hide();
            $("#ck").hide();
            $("#Puchase_cz").hide();
            $("#goods_xs").hide();
            $("#goods_ck").hide();
        })
        function dsg() {
            $("#spcg").show();
            $("#sc").hide();
            $("#ck").hide();
        }
        function dxs() {
            //$("#cg").css("display", "none");
            $("#sc").css("display", "block");
            $("#spcg").hide();
            //$("#sc").show();
            $("#ck").hide();
        }
        function dck() {
            $("#spcg").hide();
            $("#sc").hide();
            $("#ck").show();
        }
        //鼠标滑过时
        function over(hid) {
            //$("#ck").show();
           // alert($(id).val==1);
            if (hid == 1)//选择采购 则显示采购的添加
            {
                $("#Puchase_cz").show();           
            }
            else if (hid == 2)//选择销售 则显示销售的添加
            {
               $("#goods_xs").show();
           }
           else {//否则则是仓库的添加
               $("#goods_ck").show();
           }
        }
        //鼠标移开是隐藏
        function yk() {
            $("#Puchase_cz").hide();
            $("#goods_xs").hide();
            $("#goods_ck").hide();
        }
          
    </script>
</head>
<body >
    <h3>欢迎:</h3>
        <div id="sp">
            <ul id="goodsxz" onmouseout="yk()">
                <li onmouseover="over(1)">
                    <a href="#" style="margin-left:10px; width:100px; height:30px;" id="cg">商品采购</a>
                    <div id="Puchase_cz">
                        <ul style="margin-right: 16px; height: 80px; line-height:40px;">
                            <li><a href="/showsp/AddPurchase" style="color:#b200ff">添加采购信息</a></li>
                            <li><a href="javascript:dsg()" style="color:#b200ff">显示采购信息</a></li>
                        </ul>
                    </div>
                </li>
                <li onmouseover="over(2)">
                    <a href="#" style="margin-left:10px;">商品销售</a>
                    <div id="goods_xs">
                        <ul style="margin-right: 16px; line-height: 40px; height: 80px; ">
                            <li><a href="/showsp/AddMarket" style="color:#b200ff">添加销售信息</a></li>
                            <li><a href="javascript:dxs()" style="color:#b200ff">显示销售信息</a></li>
                        </ul>
                    </div>
                </li>

                <li onmouseover="over(3)">
                    <a href="#" style="margin-left:10px;">商品仓库</a>
                    <div id="goods_ck">
                        <ul style="margin-right: 16px; line-height: 40px; height: 80px; ">
                            <li><a href="/showsp/AddWareHouse" style="color:#b200ff">添加仓库信息</a></li>
                            <li><a href="javascript:dck()" style="color:#b200ff">显示仓库信息</a></li>
                        </ul>
                    </div>
                </li>
            </ul>
            
        </div>
        <div id="spcg" >
            <table class="table table-hover" >
                <tr>
                    <td>商品编号</td>
                    <td>商品名称</td>
                    <td>商品数量</td>
                    <td>商品厂家</td>
                    <td>商品单价</td>
                    <td>商品总价</td>
                    <td>采购时间</td>
                    <td>商品状态</td>
                    <th>经办人姓名</th>
                    <th>操作</th>
                </tr>
                @foreach (var item in ViewBag.spcg)
                {
                    <tr>
                        <td>@item.Gid</td>
                        <td>@item.Gname</td>
                        <td>@item.BuyNum</td>
                        <td>@item.GoodsUnit</td>
                        <td>@item.BuyPrice</td>
                        <td>@item.NumMoney</td>
                        <td>@item.BuyTime</td>
                        <td>@item.rkStatus</td>
                        <td>@item.JbrName</td>
                        <td>
                            <a href="/users/Regist">删除</a>
                           <a href="#" onclick="cg(this)">修改</a>
                        </td>
                    </tr>
                }
            </table>
    
        </div>
        <div id="sc" >
            <table class="table table-hover">
                <tr>
                    <td>商品编号</td>
                    <td>商品名称</td>
                    <td>销售数量</td>
                    <td>销售厂家</td>
                    <td>销售单价</td>
                    <td>合计金额</td>
                    <td>销售时间</td>
                    <th>操作</th>
                </tr>
                @foreach (var item in ViewBag.spxs)
                {
                    <tr>
                        <td>@item.Mid</td>
                        <td>@item.Mname</td>
                        <td>@item.MarketNum</td>
                        <td>@item.GoodsUnit</td>
                        <td>@item.SellingPrice</td>
                        <td>@item.NumMoney</td>
                        <td>@item.MarketTime</td>
                        <td>
                            <a href="">销售</a>
                        </td>
                    </tr>
                }
            </table>
        </div>
        <div id="ck" >
        <table class="table table-hover">
            <tr>
                <td>入库编号</td>
                <td>入库名称</td>
                <td>商品厂家</td>
                <td>商品原数量</td>
                <td>入库数量</td>
                <td>入库时间</td>
                <td>入库经办人姓名</td>
                <th>操作</th>
            </tr>
            @foreach (var item in ViewBag.sprk)
            {
                <tr>
                    <td>@item.Wid</td>
                    <td>@item.Wname</td>
                    <td>@item.GoodsUnit</td>
                    <td>@item.SpyuanNum</td>
                    <td>@item.RkNum</td>
                    <td>@item.RkTime</td>
                    <td>@item.RkName</td>
                    <td>
                        <a href="">修改</a>
                    </td>
                </tr>
            }
        </table>
    </div>
</body>
</html>


阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

实现一个菜单栏鼠标滑过的效果

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭