jquery第三章练习一（左导航特效）

最新推荐文章于 2023-12-04 01:00:00 发布

长河落日#

最新推荐文章于 2023-12-04 01:00:00 发布

阅读量3k

点赞数 3

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_47065927/article/details/108093717

版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>导航特效</title>
    <style type="text/css">
      * {
        margin: 0px;
        padding: 0px;
        font-size: 12px;
      }
      #nav .navsBox {
        width: 160px;
      }
      #nav .navsBox .firstNav {
        height: 45px;
        line-height: 45px;
        background-color: #ebebeb;
        border-left: 10px solid #fe705c;
        padding-left: 20px;
        width: 130px;
        font-weight: bold;
        cursor: pointer;
      }
      #nav .navsBox ul {
        display: none;
        list-style: none;
      }
      #nav .navsBox ul li {
        display: block;
        height: 45px;
        line-height: 45px;
        padding-left: 70px;
        width: 90px;
        background: #f2f2f2 33px 7px no-repeat;
      }

      #nav .navsBox ul li.jedh {
        background-image: url("./images/huan.gif");
      }
      #nav .navsBox ul li.jlbbyk {
        background-image: url("./images/you.gif");
      }
      #nav .navsBox ul li.jwljb {
        background-image: url("./images/gouwu.gif");
      }
      #nav .navsBox ul li.mrljb {
        background-image: url("./images/meiri.gif");
      }
      #nav .navsBox ul li.vipjtj {
        background-image: url("./images/zhe.gif");
      }
      #nav .navsBox ul li.onbg {
        background-color: #f9dbd1;
      }

      #nav .navsBox ul li a {
        color: #000;
        text-decoration: none;
      }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script src="js/mywork1.js"></script>
  </head>
  <body>
    <div id="nav">
      <div class="navsBox">
        <div class="firstNav">购物特权</div>
        <ul>
          <li class="jedh"><a href="#">全额兑换</a></li>
          <li class="jlbbyk"><a href="#">俱乐部包邮卡</a></li>
          <li class="jwljb"><a href="#">购物领金币</a></li>
          <li class="mrljb"><a href="#">每日领金币</a></li>
          <li class="vipjtj"><a href="#">VIP阶梯价</a></li>
        </ul>
      </div>
    </div>
  </body>
</html>
以下是实现功能的脚本代码：

```javascript
$(document).ready(function () {
  //toggle()方法进行显示隐藏交互事件，如果显示的就进行隐藏，如果是隐藏的就显示
  $(".firstNav").click(function () {
    $("ul").toggle(1000);
  });
  //当鼠标指针移至二级子菜单上时，子菜单添加背景色，
  $("li").bind("mouseover", function () {
    $(this).css("backgroundColor", "red");
  });
  $("li").bind("mouseout", function () {
    $(this).css("backgroundColor", "");
  });
});

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200819095838200.jpg#pic_center)

长河落日#

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
jquery第三章练习一（左导航特效）

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <title>导航特效</title> <style type="text/css"> * { margin: 0px; padding: 0px; font-size: 12px; }
复制链接

扫一扫