js与jquery分别实现tab标签页功能的方法


Posted in Javascript onNovember 18, 2016

本文实例讲述了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 class="ssl">1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <div id="container">
      <div class="ssd">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程序设计有所帮助。

Javascript 相关文章推荐
一些常用弹出窗口/拖放/异步文件上传等实用代码
Jan 06 Javascript
js仿百度有啊通栏展示效果实现代码
May 28 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
Oct 30 Javascript
jquery操作checked属性以及disabled属性的多种方法
Jun 20 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
Aug 31 Javascript
js实现图片无缝滚动特效
Mar 19 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
Mar 17 Javascript
jQuery实现可展开折叠的导航效果示例
Sep 12 Javascript
解决vue.js this.$router.push无效的问题
Sep 03 Javascript
在vue中使用vue-echarts-v3的实例代码
Sep 13 Javascript
JS表格的动态操作完整示例
Jan 13 Javascript
js实现文章目录索引导航(table of content)
May 10 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
Nov 18 #Javascript
浅谈javascript中遇到的字符串对象处理
Nov 18 #Javascript
文件上传,iframe跨域数据提交的实现
Nov 18 #Javascript
jQuery实现自动调用和触发某个事件的方法
Nov 18 #Javascript
jQuery与JavaScript节点创建方法的对比
Nov 18 #Javascript
用iframe实现不刷新整个页面上传图片的实例
Nov 18 #Javascript
Form表单按回车自动提交表单的实现方法
Nov 18 #Javascript
You might like
php mysql数据库操作分页类
2008/06/04 PHP
php版微信自动获取收货地址api用法示例
2016/09/22 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
基于jQuery的可以控制左右滚动及自动滚动效果的代码
2010/07/25 Javascript
Jquery插件之打造自定义的select标签
2011/11/30 Javascript
JS获取浏览器语言动态加载JS文件示例代码
2014/10/31 Javascript
jQuery实现根据类型自动显示和隐藏表单
2015/03/18 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
2015/06/19 Javascript
谈谈第三方App接入微信登录 解读
2016/12/27 Javascript
如何利用JQuery实现从底部回到顶部的功能
2016/12/27 Javascript
对vue里函数的调用顺序介绍
2018/03/17 Javascript
基于jquery实现左右上下移动效果
2018/05/02 jQuery
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
2018/09/25 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
2019/10/02 Javascript
vuex actions异步修改状态的实例详解
2019/11/06 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
2020/06/05 Javascript
[02:43]DOTA2英雄基础教程 圣堂刺客
2013/12/09 DOTA
[01:11:10]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG加赛
2014/05/26 DOTA
python打开网页和暂停实例
2014/09/30 Python
django实现分页的方法
2015/05/26 Python
简单理解Python中的装饰器
2015/07/31 Python
python基础知识小结之集合
2015/11/25 Python
解决python os.mkdir创建目录失败的问题
2018/10/16 Python
对Python3+gdal 读取tiff格式数据的实例讲解
2018/12/04 Python
解决python给列表里添加字典时被最后一个覆盖的问题
2019/01/21 Python
Python算法中的时间复杂度问题
2019/11/19 Python
python数据爬下来保存的位置
2020/02/17 Python
解决django框架model中外键不落实到数据库问题
2020/05/20 Python
Python中flatten( ),matrix.A用法说明
2020/07/05 Python
乌克兰巴士票购买网站:inBus
2021/03/12 全球购物
给水排水工程专业毕业生推荐信
2013/10/28 职场文书
门卫岗位安全职责
2013/12/13 职场文书
工伤事故赔偿协议书
2015/08/06 职场文书
汽车销售合同文本
2019/08/08 职场文书
MySQL 开窗函数
2022/02/15 MySQL