首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

jquery dt鼠标透过对应dd显示

2013-02-27 
jquery dt鼠标经过对应dd显示jquery操作:dt鼠标经过加上 classselected,同时它对应的dd移去 classhid

jquery dt鼠标经过对应dd显示
jquery操作:

dt鼠标经过加上 class="selected",同时它对应的dd移去 class="hidden"。




<dl class="xnavlist">
<dt class="selected"><a href="#">分类一</a></dt>
<dd>
<ul class="item-01">
<li></li>
<li></li>
<li></li>
</ul>
</dd>
<dt><a href="#" target="_blank">分类二</a></dt>
<dd class="hidden">
<ul class="item-02">
<li></li>
<li></li>
<li></li>
</ul>
</dd>
<dt><a href="#" target="_blank">分类三</a></dt>
<dd class="hidden">
<ul class="item-03">
<li></li>
<li></li>
<li></li>
</ul>
</dd>
<dt><a href="#" target="_blank">English</a></dt>
</dl>


[解决办法]
    $(function () {
        $(".xnavlist dt").mouseover(function () {
            $(this).attr("class", "selected").siblings().attr("class", "hidden")
        })
    });

[解决办法]
    $(function () {
        $(".xnavlist dd:not(':first')").hide();
        $(".xnavlist dt:not(':last')").mouseover(function () {
            $(".xnavlist dd").hide().attr("class","hidden");
            $(this).next().removeAttr("class").show();
            $(this).addClass("selected").siblings().removeAttr("class");
        });
    });

热点排行