zoukankan      html  css  js  c++  java
  • jQuery实现二级菜单

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
    *{margin: 0;padding: 0}
    ul{float: left; 200px}
    ul li{background: #ccc;padding: 30px 10px}
    .myitems{float: left; 500px;height: 300px}
    .myitems div{ 100%;height: 100%;display: none}
    .item1{background: #f03}
    .item2{background: #6fc}
    </style>
    </head>
    <body>
    <ul >
    <li>12</li>
    <li>123</li>
    </ul>
    <div class="myitems">
    <div class="item1 item"></div>
    <div class="item2 item"></div>
    </div>
    <script>
    $(function(){
    $("li").mouseenter(function(){
    $(".item").hide().eq($(this).index()).show();
    }).mouseleave(function(){
    console.log("aaa");
    $(".item").eq($(this).index()).hide();
    })
    $(".item").mouseenter(function(){
    $(this).show()
    }).mouseleave(function(){
    $(this).hide()
    })
    })
    </script>
    </body>
    </html>
  • 相关阅读:
    vSphere存储
    NFS服务器搭建
    windows下部署 ISCSI存储
    使用命令修改ip地址
    磁盘操作
    OpenFiler安装与基本配置
    OSPF系列
    NAT
    VLAN系列
    Linux下DNS服务器的基本搭建
  • 原文地址:https://www.cnblogs.com/ZH1132672711/p/5884023.html
Copyright © 2011-2022 走看看