jQuery+CSS实现简单切换菜单示例
本文实例讲述了jQuery+CSS实现简单切换菜单的方法。分享给大家供大家参考，具体如下：
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>无标题页</title>
<scriptsrc="jquery-1.7.2.min.js"type="text/javascript"></script>
<scripttype="text/javascript">
$(function(){
toggleEvent(0);
varmTitle=$(".menuTitle");
mTitle.each(function(i){
$(this).click(function(){
toggleSlideEvent(i);
$(this).css("border-bottom","1px#ccccffsolid");
});
});
});
functiontoggleSlideEvent(i)
{
$("ul",".menu1").css("display","none");
$("ul",".menu1").eq(i).slideDown();
$(".menuTitle").each(function(){
$(this).css("border-bottom","0px#ccccffsolid");
});
}
functiontoggleEvent(i)
{
$("ul",".menu1").css("display","none");
$("ul",".menu1").eq(i).css("display","block");
$(".menuTitle").eq(i).css("border-bottom","1px#ccccffsolid");
}
</script>
<styletype="text/css">
.menu1
{
border:1px#CCCCFFsolid;
border-top:0px;
width:160px;
}
.menuTitle
{
width:100%;
height:26px;
border-bottom:0px#CCCCFFsolid;
border-top:1px#CCCCFFsolid;
text-align:left;
line-height:26px;
cursor:pointer;
}
ul
{
border:0px#CCCCFFsolid;
width:100%;
margin-left:0px;
margin-top:0px;
}
ulli
{
height:36px;
line-height:36px;
border:0pxgraysolid;
margin-top:0px;
margin-left:0px;
padding-left:20px;
list-style-type:none;
/*background:url(images/Title.png);*/
}
ulli:hover
{
height:36px;
line-height:36px;
border:0pxgraysolid;
margin-top:0px;
margin-left:0px;
padding-left:20px;
list-style-type:none;
/*background:url(images/Title.png);*/
cursor:pointer;
}
</style>
</head>
<body>
<formid="form1"runat="server">
<divclass="menu1">
<divclass="menuTitle">
TITLE1</div>
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
<li>Menu5</li>
</ul>
<divclass="menuTitle">
TITLE2</div>
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
<li>Menu5</li>
</ul>
<divclass="menuTitle">
TITLE3</div>
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
<li>Menu5</li>
</ul>
</div>
</form>
</body>
</html>
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。