手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >js与jquery分别实现tab标签页功能的方法
js与jquery分别实现tab标签页功能的方法
摘要:本文实例讲述了js与jquery分别实现tab标签页功能的方法。分享给大家供大家参考,具体如下:首先列出样式和html标签*{margin:...

本文实例讲述了js与jquery分别实现tab标签页功能的方法。分享给大家供大家参考,具体如下:

首先列出样式和html标签

<style type="text/css"> *{margin: 0;padding: 0;} #myul li {list-style: none; float: left; border: 1px solid #ddd; width: 100px; height: 20px; text-align: center; line-height: 20px;} #container div{display: none; width: 303px; height: 300px; border: 1px solid #ddd; } #container .ssd{display: block;} .ssl{background: #abcdef;} </style> </head> <body> <div id="tab"> <ul id="myul"> <li>1</li> <li>2</li> <li>3</li> </ul> <div id="container"> <div>woshi1</div> <div>woshi2</div> <div>woshi3</div> </div> </div> </body>

然后就是原生的js 实现tab标签 的代码

<script type="text/javascript"> var ul = document.getElementById('myul'); var li = ul.getElementsByTagName('li'); var con = document.getElementById('container'); var div = con.getElementsByTagName('div'); var len = li.length; for (var i = 0; i < len; i++) { li[i].index = i; li[i].onclick=choose; li[i].onmouseover = choose; }; function choose(){ for(var j = 0; j < len; j++) { li[j].className = ''; div[j].style.display = 'none'; } this.className = 'ssl'; div[this.index].style.display='block'; } </script>

那我们改用jquery实现 代码如下

$('#myul li').click(choose); $('#myul li').hover(choose); function choose(){ $(this).addClass('ssl').siblings().removeClass('ssl'); $('#container div').eq($(this).index()).show().siblings().hide(); }

其实函数还可以简化:

function choose(){ $(this).addClass('ssl').siblings().removeClass('ssl').parent().next().children().eq($(this).index()).show().siblings().hide(); }

希望本文所述对大家JavaScript程序设计有所帮助。

【js与jquery分别实现tab标签页功能的方法】相关文章:

Javascript实现div层渐隐效果的方法

javascript模拟评分控件实现方法

jquery简单实现外部链接用新窗口打开的方法

jquery读取xml文件实现省市县三级联动的方法

js实现鼠标经过表格行变色的方法

js动态创建及移除div的方法

js实现从右向左缓缓浮出网页浮动层广告的方法

基于jquery实现下拉框美化特效

javascript用函数实现对象的方法

jQuery实现给页面换肤的方法

精品推荐
分类导航