用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 text()要注意啦
Oct 30 Javascript
JavaScript判断变量是否为空的自定义函数分享
Jan 31 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
Aug 05 Javascript
javascript自动恢复文本框点击清除后的默认文本
Jan 12 Javascript
使用JS判断移动端手机横竖屏状态
Jul 30 Javascript
webpack实现一个行内样式px转vw的loader示例
Sep 13 Javascript
详解小程序不同页面之间通讯的解决方案
Nov 23 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
关于vue表单提交防双/多击的例子
Oct 31 Javascript
vue2.0 解决抽取公用js的问题
Jul 31 Javascript
vue实现移动端触屏拖拽功能
Aug 21 Javascript
JavaScript 防盗链的原理以及破解方法
Dec 29 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
JavaScript实现滚动栏效果的方法
2015/04/27 PHP
PHP 闭包详解及实例代码
2016/09/28 PHP
Mac系统下安装PHP Xdebug
2018/03/30 PHP
在页面上点击任一链接时触发一个事件的代码
2007/04/07 Javascript
JQuery打造PHP的AJAX表单提交实例
2009/11/03 Javascript
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
2011/01/08 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
2013/07/09 Javascript
Jquery AJAX POST与GET之间的区别
2013/11/14 Javascript
javascript运行机制之this详细介绍
2014/02/07 Javascript
JavaScript插件化开发教程 (三)
2015/01/27 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
2015/10/22 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
2016/06/03 Javascript
jQuery动态加载css文件实现方法
2016/06/15 Javascript
Vue.js 中的 $watch使用方法
2017/05/25 Javascript
使用express搭建一个简单的查询服务器的方法
2018/02/09 Javascript
如何解决.vue文件url引用文件的问题
2019/01/18 Javascript
Javascript读取上传文件内容/类型/字节数
2019/04/30 Javascript
JS实现简易留言板(节点操作)
2020/03/16 Javascript
[00:20]TI9观赛名额抽取Ⅱ
2019/07/24 DOTA
在Python中关于中文编码问题的处理建议
2015/04/08 Python
很酷的python表白工具 你喜欢我吗
2019/04/11 Python
Django视图扩展类知识点详解
2019/10/25 Python
python yield和Generator函数用法详解
2020/02/10 Python
浅谈spring boot 集成 log4j 解决与logback冲突的问题
2020/02/20 Python
美国创意之家:BulbHead
2017/07/12 全球购物
麦当劳印度网上订餐:McDelivery
2020/03/16 全球购物
俄罗斯品牌服装和鞋子在线商店:BRIONITY
2020/03/26 全球购物
为什么UNION ALL比UNION快
2016/03/17 面试题
JSP&Servlet技术面试题
2015/05/21 面试题
感恩父母的演讲稿
2014/05/06 职场文书
团队精神口号
2014/06/06 职场文书
2014年药房工作总结
2014/11/22 职场文书
师德培训心得体会2016
2016/01/09 职场文书
保安辞职申请书应该怎么写?
2019/07/15 职场文书
golang定时器
2022/04/14 Golang
python绘制简单直方图(质量分布图)的方法
2022/04/21 Python