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>

  • 相关阅读:
    Hander
    N皇后问题--递归回溯
    NYOJ-571 整数划分(三)
    递归--递推之组合数
    深搜最基础题---全排列And组合数
    递归---NYOJ-176 整数划分(二)和NYOJ-279队花的烦恼二
    递归---NYOJ-90整数划分(一)
    线段树---HDU2795Billboard
    输入输出外挂
    线段树---HDU1394Minimum Inversion Number
  • 原文地址:https://www.cnblogs.com/aimyfly/p/2483124.html
Copyright © 2011-2022 走看看