jquery学习实现的菜单

原创 2012年03月22日 22:57:39
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery-导航菜单</title>
<script src="../include/jquery-1.7.1.js"></script>
<style>
#menu{width:300px;}
.has_children{background:#555;color:#fff;cursor:pointer;}
.highlight{ color:#fff;background:green;}
div{padding:0; margin:10px 0;}
div a{
	background:#888;display:none;float:left;width:300px;}
</style>
<script>
$(document).ready(function (){
     $(".has_children").click(function (){
	   $(this).addClass("highlight")
	        .children("a").show().end()
			.siblings().removeClass("highlight")
			.children("a").hide(); 
	});
});
</script>
</head>

<body>
  <div id="menu">
     <div class="has_children">
        <span>qqqq</span>
        <a>wwww</a>
        <a>eee</a>
        <a>rrrr</a>
        <a>tttt</a>
        <a>yyyy</a>
        <a>uuuu</a>
        <a>iiiii</a>
     </div>
     <div class="has_children">
        <span>aaaaa</span>
        <a>aaaa</a>
        <a>sssss</a>
        <a>dddd</a>
        <a>ffff</a>
        <a>ffff</a>
     </div>
       <div class="has_children">
        <span>ffff</span>
        <a>zzzz</a>
        <a>xxxx</a>
        <a>cccc</a>
     </div>
  </div>
</body>
</html>

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

JQuery学习笔记之实现菜单的下拉

实现的效果如图所示:点击“菜单一”,出现“子菜单一,子菜单二”  点击“菜单二”,出现“子菜单一,子菜单二”, js相关的代码: $(document).ready(fun...

jquery学习笔记(四)-----jquery实现二级树状菜单

jquery二级树形菜单

jQuery-快速实现多级菜单效果

**利用js或者jquery最快速实现导航条的多级菜单效果。我这个代码用的是jquery1.9.1,ie8以下的兼容有待考虑,主要是代码的简介性,write less,do more.** ...

JQuery EasyUI Combobox 实现省市二级联动菜单

JQuery EasyUI Combobox 实现省市二级联动菜单

利用CSS、JQuery和div实现动态多级菜单

1、与前面不同,使用的CSS是class;前面的静态菜单使用的CSS是id方式。 我的菜单 div { margin:5px; padding: 5px; float:ri...

jQuery实现风琴菜单,超级简单,一行代码!

问题描述:使用jQuery实现风琴菜单的效果 代码比较简单,直接上代码了,JQuery的文件,这里没有给。 风琴菜单 #div1{ wid...

jQuery实现淡入淡出的可展开级联菜单

在很多网站的导航菜单的地方,大多数采用可展开的级联菜单。点击主菜单就会展开下面的子菜单,而且在另外一 个地方能够加载远程的网页而且无闪屏不用刷新界面,下面我们来演示一个淡入淡出的带有动态效果的级联菜...

jquery实现下拉菜单的二级联动,利用json对象从DB取值显示联动

利用struts2和Ajax实现json对象的传输,然后实现菜单的二级联动 下面是我的 js文件原码: var mail={ //初始化 init:{ //初始化数据 ini...

利用jQuery 实现一个简单的侧边菜单隐藏显示功能

直接步入正题,创建一个html文件, 复制以下代码部分就能看到效果 boot样式用的网络资源,可以直接使用 jQuery库自行添加 ps:没有拆分,有点略长,不过直接复制就能用了。 可以结合boot...

用jquery实现下拉菜单联动[调用数据库]

//显示联动菜单 //初始化 $.ajax({ url: "showIllegalSelectOption",//调用方法 type: "GET", ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)