JQUERY如何实现菜单的动态修改?

2017-08-28 09:00 出处:360java.com 作者:360java  阅读()
lt;div class=quot;mainmenuquot;gt; lt;div class=quot;indexquot;gt; lt;div class=quot;Normalquot;gt;lt;a href=quot;/homequot; title=quot;首页,Normal,home
<div class="mainmenu">
    <div class="index">
    <div class="Normal"><a href="/home" title="首页,Normal,home,sxcg" ><img alt="首页,Normal" src="/Content/Themes/Default/Mainmenu/Normal/home.png" /></a></div>
</div>
<div>
    <div class="Normal"><a href="/wgzx" title="温故知新,Normal,wgzx,sxcg" ><img alt="温故知新,Normal" src="/Content/Themes/Default/Mainmenu/Normal/wgzx.png" /></a></div>
</div>
<div>
    <div class="Selected"><a href="/sxcg" title="思想茶馆,Selected,sxcg,sxcg" ><img alt="思想茶馆,Selected" src="/Content/Themes/Default/Mainmenu/Selected/sxcg.png" /></a></div>
</div>
<div>
    <div class="Normal"><a href="/shcs" title="书画藏室,Normal,shcs,sxcg" ><img alt="书画藏室,Normal" src="/Content/Themes/Default/Mainmenu/Normal/shcs.png" /></a></div>
</div>
<div>
    <div class="Normal"><a href="/zjyh" title="专家有话,Normal,zjyh,sxcg" ><img alt="专家有话,Normal" src="/Content/Themes/Default/Mainmenu/Normal/zjyh.png" /></a></div>
</div>
<div>
    <div class="Normal"><a href="/gxzk" title="国学智库,Normal,gxzk,sxcg" ><img alt="国学智库,Normal" src="/Content/Themes/Default/Mainmenu/Normal/gxzk.png" /></a></div>
</div>
<div>
    <div class="Normal"><a href="/mtsk" title="媒体时空,Normal,mtsk,sxcg" ><img alt="媒体时空,Normal" src="/Content/Themes/Default/Mainmenu/Normal/mtsk.png" /></a></div>
    <div class="Normal"><a href="/zbmm" title="招兵买马,Normal,zbmm,sxcg" ><img alt="招兵买马,Normal" src="/Content/Themes/Default/Mainmenu/Normal/zbmm.png" /></a></div>
</div>
<div>
    <div class="Normal"><a href="/flfg" title="法律法规,Normal,flfg,sxcg" ><img alt="法律法规,Normal" src="/Content/Themes/Default/Mainmenu/Normal/flfg.png" /></a></div>
    <div class="Normal"><a href="/whlt" title="文化论坛,Normal,whlt,sxcg" ><img alt="文化论坛,Normal" src="/Content/Themes/Default/Mainmenu/Normal/whlt.png" /></a></div>
</div>
<script language="javascript" type="text/javascript">
    $(document).ready(
        function () {
            $('.mainmenu div.Normal img').mouseover(function () { alert(1); });
            //alert($('.mainmenu div.Normal img')[0].outerHTML);
            /*$('.mainmenu div.Normal img').mouseover(function(){
            alert(1);//$('.mainmenu div.Normal img').attr("src", "");
            }*/
        }
    );
</script>
</div>

如上段代码,有一行菜单,我希望当鼠标进入class为Normal的区域时把其内的图片地址进行修改,当鼠标离开的时候恢复原状。

鼠标进入后的图标格式跟原始正常状况路径类似,只是把Normal修改为Overed。

< >
最佳答案
var imgSr=$("#图片的ID").attr("src");
$(
'.mainmenu div.Normal img').hover(function () { $("#要修改的图片").attr("src","修改的地址") },function()
{
  $("#图片").attr("src",imgSr);
});

这个图片是动态的。该如何在hover或mouseover事件的方法中获取当前触发事件的对象?

@笨笨蜗牛: var currentElement= $(this);

 

currentElement就是当前的对象!!

不可以给我说!!

@田麦成: 谢谢!就是$(this)!!!

分享到:
本文标签: html, jquery

相关文章

发表评论(共条评论)愿您的每句评论,都能给大家的生活添色彩,带来共鸣,带来思索,带来快乐。

Copyright (C) java学习 360java 360java.com, All Rights Reserved.

苏ICP备16022210号