文章标题

来源：互联网发布：怎么写好网络小说知乎编辑：程序博客网时间：2024/05/16 15:43
二级菜单
<!DOCTYPE html><html>  <head>    <title>京东菜单</title>    <style>     .none{display:none;}     .act{background:#999395;}      #wrap{        position:relative;        left:0;        top:20px;        width:200px;      }      #wrap ul{        background:#6e6568;        padding:0;      }      #wrap ul li{        display:block;        height:30px;        width:200px;        color:#fff;        text-align:center;        line-height:30px;      }            .one li span:hover{color:red;}       #sub{        width:700px;        background:#eee;        height:200px;        position:absolute;        top:0px;        left:200px;      }  </style><script src="jquery-1.7.2.min.js"></script>  </head>  <body>    <div id="wrap">      <ul class="one">        <li data-id="1" ><span>家用电器</span></li>        <li data-id="2"><span>手机/运营商/数码</span></li>        <li data-id="3"><span>电脑/办公</span></li>        <li data-id="4"><span>家居/家具/家装/厨具</span></li>        <li data-id="5"><span>男装/童装/女装</span></li>        <li data-id="6"><span>美妆个护/宠物</span></li>        <li data-id="7"><span>女鞋/箱包/珠宝/钟表</span></li>        <li data-id="8"><span>男鞋/运动/户外</span></li>        <li data-id="9"><span>汽车/汽车用品</span></li>        <li data-id="10"><span>母婴/玩具乐器</span></li>        <li data-id="11"><span>食品/酒类/生鲜</span></li>      </ul>  <div id="sub" class="none">    <div id="1" class="sub_cont none">家用电器</div>    <div id="2" class="sub_cont none">手机/运营商/数码</div>    <div id="3" class="sub_cont none">电脑/办公</div>    <div id="4" class="sub_cont none">家居/家具/家装/厨具</div>    <div id="5" class="sub_cont none">男装/童装/女装</div>    <div id="6" class="sub_cont none">美妆个护/宠物</div>    <div id="7" class="sub_cont none">女鞋/箱包/珠宝/钟表</div>    <div id="8" class="sub_cont none">男鞋/运动/户外</div>    <div id="9" class="sub_cont none">汽车/汽车用品</div>    <div id="10" class="sub_cont none">母婴/玩具乐器</div>    <div id="11" class="sub_cont none">食品/酒类/生鲜</div>  </div></div><script>$(function(){  var activeRow;  var activeMun;  $(".one li").on(" mouseover",function(e){   $(this).addClass("act");   $("#sub").removeClass("none");   var arr=$(this).attr("data-id");   $("#sub div").eq(arr-1).removeClass("none");    $("#sub div").eq(arr-1).siblings().addClass("none");  })  .on("mouseout",function(e){    $(this).removeClass("act");    $("#sub").addClass("none");  })});     </script>  </body></html>
阅读全文
0 0