当前位置：傲看软件园 → 文章中心 → WEB学院 → JavaScript

jquery人们问题导航菜单及显示隐藏层

减小字体

增大字体作者：佚名来源：本站整理发布时间：2009-04-17 21:45:39

用jquery实现显示隐藏层，和用jquery实现导航样式
非常简单的几句代码，免去了用js写一大串的垃圾代码。

//下面是导航样式的
$("a[title='nav']").click(function(){
         for(i=0;i<$("a[title='nav']").size();i++)
         {
            if($(this).attr("id")!=$("a[title='nav']").eq(i).attr("id"))
               $("a[title='nav']").eq(i).removeClass("hover");
            else
                  $("a[title='nav']").eq(i).addClass("hover");
         }
});
<a href="#" id="nav1" title="nav" class="hover" onfocus="this.blur();">nav1</a>
<a href="#" id="nav2" title="nav" onfocus="this.blur();">nav2</a>
<a href="#" id="nav3" title="nav" onfocus="this.blur();">nav3</a>
<a href="#" id="nav4" title="nav" onfocus="this.blur();">nav4</a>
//下面是收起和打开的样式
$(".Thand").click(function(){          $(this).next().css("display",$(this).next().css("display")=="block" ? "none":"block");
});
<h2 class="Thand"><span>公司介绍</span><a href="#">open</a></h2>
<div class="infobox">
      <dl>
         <dt><img src="../images/index_bg1.gif" name="logo"  id="logo" width="300"/></dt>
         <dd>
         公司介绍信息公司介绍信息公司介绍信息公司介绍信息公司介绍信息公司介绍信息公司介绍信息公司介绍信息公司介绍信息
      公司介绍信息公司介绍信息公司介绍信息公司介绍信息公司介绍信息公司介绍信息公司介绍信息公司介绍信息公司介绍信息
         公司介绍信息公司介绍信息公司介绍信息公司介绍信息公司介绍信息公司介绍信息公司介绍信息公司介绍信息公司介绍信息
         公司介绍信息公司介绍信息公司介绍信息公司介绍信息公司介绍信息公司介绍信息公司介绍信息公司介绍信息公司介绍信息
      公司介绍信息公司介绍信息公司介绍信息公司介绍信息公司介绍信息公司介绍信息公司介绍信息公司介绍信息公司介绍信息
         </dd>
   </dl>
</div>