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 相关文章推荐
老鱼 浅谈javascript面向对象编程
Mar 04 Javascript
jquery图片延迟加载 前端开发技能必备系列
Jun 18 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
Jun 02 Javascript
JS中使用Array函数shift和pop创建可忽略参数的例子
May 28 Javascript
在AngularJS应用中实现一些动画效果的代码
Jun 18 Javascript
JavaScript html5 canvas绘制时钟效果
Mar 01 Javascript
jQuery遍历json的方法(推荐)
Jun 12 Javascript
JavaScript mixin实现多继承的方法详解
Mar 30 Javascript
JavaScript数据结构学习之数组、栈与队列
May 02 Javascript
在vue中通过axios异步使用echarts的方法
Jan 13 Javascript
微信小程序scroll-view组件实现滚动动画
Jan 31 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
Jun 27 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长字符串定义方法
2012/07/12 PHP
PHP实现图片压缩
2020/09/09 PHP
Javascript实例教程(19) 使用HoTMetal(1)
2006/12/23 Javascript
javascript 面向对象编程 聊聊对象的事
2009/09/17 Javascript
javascript Keycode对照表
2009/10/24 Javascript
ext combox 下拉框不出现自动提示,自动选中的解决方法
2010/02/24 Javascript
script标签的 charset 属性使用说明
2010/12/04 Javascript
javascript实现控制div颜色
2015/07/07 Javascript
如何使用Vuex+Vue.js构建单页应用
2016/10/27 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
2017/02/10 Javascript
js+html5实现侧滑页面效果
2017/07/15 Javascript
详解http访问解析流程原理
2017/10/18 Javascript
React中常见的动画实现的几种方式
2018/01/10 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
2019/05/13 Javascript
原生JS利用transform实现banner的无限滚动示例代码
2020/06/15 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
2020/11/06 Javascript
[02:07]2017国际邀请赛中国区预选赛直邀战队前瞻
2017/06/23 DOTA
python简单读取大文件的方法
2016/07/01 Python
Python Web框架之Django框架Form组件用法详解
2019/08/16 Python
一行Python代码制作动态二维码的实现
2019/09/09 Python
pytorch 指定gpu训练与多gpu并行训练示例
2019/12/31 Python
django 数据库返回queryset实现封装为字典
2020/05/19 Python
python连接mysql有哪些方法
2020/06/24 Python
菲律宾优惠券网站:MetroDeal
2019/04/12 全球购物
Java如何格式化日期
2012/08/07 面试题
介绍一下常见的木马种类
2014/11/15 面试题
如何现实servlet的单线程模式
2014/08/05 面试题
市场营销职业生涯规划书范文
2014/01/12 职场文书
绿色城市实施方案
2014/03/19 职场文书
祖国在我心中演讲稿600字
2014/09/23 职场文书
法英专业大学生职业生涯规划范文:衡外情,量己力!
2014/09/23 职场文书
学校后勤工作总结2015
2015/05/15 职场文书
寻找最美乡村教师观后感
2015/06/18 职场文书
PHP使用非对称加密算法RSA
2021/04/21 PHP
仅用一句SQL更新整张表的涨跌幅、涨跌率的解决方案
2021/05/06 MySQL
使用 Koa + TS + ESLlint 搭建node服务器的过程详解
2022/05/30 NodeJs