zoukankan      html  css  js  c++  java
  • 二级图片导航效果

    导航为图片且切换时也需图片,带下拉二级菜单的,图片选中前后状态要求规则命名,id不能在同一文件里重复出现

    $("#menunav li").each(function () {

        $(this).mouseover(function () {
      
         $(this).find(".subnav").show();
         $(this).find("a").find("img").attr("src", $(this).find("a").find("img").attr("src").replace("menu_", "menuhover_"));
         

         $(this).hover(function () {
         }, function () {
          $(this).find("a").find("img").attr("src", $(this).find("a").find("img").attr("src").replace("menuhover_", "menu_"));
          $(this).find(".subnav").hide();
      
         });
        })
        });

    注意mousehover(当鼠标点击子菜单时主导航仍处于选中状态)同hover的区别

    <ul class="menunav">
                <li><a href="" rel="images/menuhover_05.gif"><img src="images/menu_05.gif" alt="教学成果"/></a>
                 <ul class="subnav"  style="display:none;">
                     <li><a href="#">安全宝典</a></li>
                        <li><a href="#" class="cur">创意体能活动</a></li>
                        <li><a href="#">音频视频</a></li>
                    </ul>
                </li>

            </ul>

  • 相关阅读:
    bzoj4010 [HNOI2015]菜肴制作
    PHP--------TP中的ajax请求
    二维数组去重
    手机号138-0013-8000格式存储
    spring4-2-bean配置-1-依赖注入
    spring4-1-Spring的简单介绍
    Result Grouping / Field Collapsing-结果分组
    vim自动补全
    vim配置-程序员【转】
    服务端程序设计和实现总结 【转】
  • 原文地址:https://www.cnblogs.com/aimyfly/p/2483124.html
Copyright © 2011-2022 走看看