用jquery统计子菜单的条数示例代码


Posted in Javascript onOctober 18, 2013

用jquery统计子菜单的条数示例代码 
jquery tab特效~ (类似选项卡)https://3water.com/article/42151.htm

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Tabs</title> 
<style type="text/css"> 
/* Remove margin padding */ 
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td { margin:0; padding:0; } /* Default Font */ 
body,button,input,select,textarea { font:12px/1.5 \5b8b\4f53,arial,sans-serif; } 
h1,h2,h3,h4,h5,h6 { font-size:100%; } 
address,cite,dfn,em,var { font-style:normal; } 
code,kbd,pre,samp { font-family:courier new,courier,monospace; } 
small { font-size:12px; } 
ul,ol { list-style:none; } 
a { text-decoration:none; } 
a:hover { text-decoration:underline; } 
sup { vertical-align:text-top; } 
sub { vertical-align:text-bottom; } 
legend { color:#000; } 
fieldset,img { border:0; } 
button,input,select,textarea{ font-size:100%; } 
table { border-collapse:collapse; border-spacing:0; } 
.col-main{ float:left; width:100%; min-height:1px; } 
.col-sub,.col-extra { float:left; } 
.layout:after,.main-wrap:after,.col-sub:after,.col-extra:after { content:'\20'; display:block; height:0; clear:both; } 
.layout,.main-wrap,.col-sub,.col-extra { zoom:1; } 
/* Common Features */ 
.hidden { display:none; } 
.invisible { visibility:hidden; } 
/* Remove Float */ 
.clear { display:block; height:0; overflow:hidden; clear:both; } 
.clearfix:after { content:'\20'; display:block; height:0; clear:both; } 
.clearfix { *zoom:1; } 
/* For non ie browsers also display the vertical scroll bar by default, to prevent the flicker caused by the scroll bar */ 
html { overflow-y:scroll; } 
/* Default link styles */ 
a:link {color: #003399; } 
a:visited {color: #123689;} 
a:hover {color: #FF6600;} 
</style> 
</head> 
<body> 
<style type="text/css"> 
.menu { width:200px; border:1px solid #CCC; margin-bottom:20px } 
.menu h3 { height:30px; line-height:30px; background:#ccc; } 
.menu .num { font-weight:bold; color:red; padding-left:30px; } 
</style> 
<div class="menu"> 
<h3>系统设置 <span class="num"></span></h3> 
<ul> 
<li>菜单1</li> 
<li>菜单2</li> 
<li>菜单3</li> 
<li>菜单4</li> 
<li>菜单5</li> 
<li>菜单6</li> 
</ul> 
</div> 
<div class="menu"> 
<h3>菜单设置2 <span class="num"></span></h3> 
<ul> 
<li>菜单1</li> 
<li>菜单2</li> 
<li>菜单3</li> 
</ul> 
</div> 
<div class="menu"> 
<h3>菜单设置3 <span class="num"></span></h3> 
<ul> 
<li>菜单1</li> 
<li>菜单2</li> 
<li>菜单3</li> 
<li>菜单4</li> 
<li>菜单5</li> 
</ul> 
</div> 

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
for ( var i=0; i<$('.menu').length; i++){ 
var num = $('.menu').eq(i).children('ul').children('li').length; 
$('.menu').eq(i).find('.num').text(num); 
} 
</script> 
</body> 
</html>
Javascript 相关文章推荐
基于Jquery+Ajax+Json的高效分页实现代码
Oct 29 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
May 23 Javascript
jquery单选框radio绑定click事件实现方法
Jan 14 Javascript
js分页工具实例
Jan 28 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
Mar 18 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
Apr 10 Javascript
网页收藏夹显示ICO图标(代码少)
Aug 04 Javascript
jQuery插件实现适用于移动端的地址选择器
Feb 18 Javascript
微信小程序模版渲染详解
Jan 26 Javascript
React 无状态组件(Stateless Component) 与高阶组件
Aug 14 Javascript
js中apply()和call()的区别与用法实例分析
Aug 14 Javascript
JavaScript中的this原理及6种常见使用场景详解
Feb 14 Javascript
Jquery实现图片放大镜效果的思路及代码(自写)
Oct 18 #Javascript
通过length属性判断jquery对象是否存在
Oct 18 #Javascript
js 使FORM表单的所有元素不可编辑的示例代码
Oct 17 #Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
Oct 17 #Javascript
jquery快捷动态绑定键盘事件的操作函数代码
Oct 17 #Javascript
js实现的常用的左侧导航效果
Oct 17 #Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
Oct 17 #Javascript
You might like
发挥语言的威力--融合PHP与ASP
2006/10/09 PHP
PHP将页面中点击数量高的链接进行高亮显示的方法
2016/05/30 PHP
自制PHP框架之设计模式
2017/05/07 PHP
JS实现浏览器菜单命令
2006/09/05 Javascript
使一个函数作为另外一个函数的参数来运行的javascript代码
2007/08/13 Javascript
Javascript 函数对象的多重身份
2009/06/28 Javascript
JQuery 表单中textarea字数限制实现代码
2009/12/07 Javascript
javascript 动态修改样式和层叠样式表代码
2010/04/27 Javascript
iframe 异步加载技术及性能分析
2011/07/19 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
2013/07/17 Javascript
js中单引号与双引号冲突问题解决方法
2013/10/04 Javascript
js实现全屏漂浮广告移入光标停止移动
2013/12/02 Javascript
js日期、星座的级联显示代码
2014/01/23 Javascript
js给selected添加options的方法
2015/05/06 Javascript
JS延时器提示框的应用实例代码解析
2016/04/27 Javascript
JavaScript中日常收集常见的10种错误(推荐)
2017/01/08 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
2017/03/15 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
2017/07/24 Javascript
详解redis在nodejs中的应用
2018/05/02 NodeJs
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
2018/06/25 Javascript
vue 实现Web端的定位功能 获取经纬度
2019/08/08 Javascript
Python3.x和Python2.x的区别介绍
2013/02/12 Python
批量获取及验证HTTP代理的Python脚本
2017/04/23 Python
python实现二级登陆菜单及安装过程
2019/06/21 Python
vscode 配置 python3开发环境的方法
2019/09/19 Python
Python collections中的双向队列deque简单介绍详解
2019/11/04 Python
python 多进程队列数据处理详解
2019/12/23 Python
用60行代码实现Python自动抢微信红包
2021/02/04 Python
详解解决jupyter不能使用pytorch的问题
2021/02/18 Python
澳大利亚在线消费电子产品商店:TobyDeals
2020/01/05 全球购物
十八大标语口号
2014/10/09 职场文书
司考复习计划
2015/01/19 职场文书
护士实习自荐信
2015/03/06 职场文书
SQL Server连接查询的实用教程
2021/04/07 SQL Server
Python带你从浅入深探究Tuple(基础篇)
2021/05/15 Python
Nginx四层负载均衡的配置指南
2021/06/11 Servers