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 相关文章推荐
showModalDialog模态对话框的使用详解以及浏览器兼容
Jan 11 Javascript
JS可以控制样式的名称写法一览
Jan 16 Javascript
jQuery中parentsUntil()方法用法实例
Jan 07 Javascript
JavaScript代码判断点击第几个按钮
Dec 13 Javascript
JavaScript跨域调用基于JSON的RESTful API
Jul 09 Javascript
AngularJS 过滤器的简单实例
Jul 27 Javascript
手机Web APP如何实现分享多平台功能
Aug 19 Javascript
微信小程序 转发功能的实现
Aug 04 Javascript
vue+iview+less+echarts实战项目总结
Feb 22 Javascript
vue注册组件的几种方式总结
Mar 08 Javascript
SVG实现时钟效果
Jul 17 Javascript
浅析js中mvvm模式实现的原理
Oct 06 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
解析CodeIgniter自定义配置文件
2013/06/18 PHP
PHP简单实现HTTP和HTTPS跨域共享session解决办法
2015/05/27 PHP
一张表搞清楚php is_null、empty、isset的区别
2015/07/07 PHP
PHP微信PC二维码登陆的实现思路
2017/07/13 PHP
Laravel 批量更新多条数据的示例
2017/11/27 PHP
Laravel+Intervention实现上传图片功能示例
2019/07/09 PHP
详解阿里云视频直播PHP-SDK接入教程
2020/07/09 PHP
asp批量修改记录的代码
2008/06/25 Javascript
JavaScript 图像动画的小demo
2012/05/23 Javascript
有关javascript的性能优化 (repaint和reflow)
2013/04/12 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
2013/12/11 Javascript
js实现String.Fomat的实例代码
2016/09/02 Javascript
Mongoose实现虚拟字段查询的方法详解
2017/08/15 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
2017/10/26 Javascript
webpack配置打包后图片路径出错的解决
2018/04/26 Javascript
[00:12]2018DOTA2亚洲邀请赛 sylar表现SOLO技艺
2018/04/06 DOTA
[01:01:51]EG vs VG Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
python append、extend与insert的区别
2016/10/13 Python
pandas中的DataFrame按指定顺序输出所有列的方法
2018/04/10 Python
pyqt5 删除layout中的所有widget方法
2019/06/25 Python
python爬虫 基于requests模块的get请求实现详解
2019/08/20 Python
Pyqt5 关于流式布局和滚动条的综合使用示例代码
2020/03/24 Python
css3实现六边形边框的实例代码
2019/05/24 HTML / CSS
详解CSS3弹性伸缩盒
2020/09/21 HTML / CSS
HTML5对手机页面长按会粘贴复制禁用的解决方法
2016/07/19 HTML / CSS
美国最大的在线寄售和旧货店:Swap.com
2018/08/27 全球购物
俄罗斯隐形眼镜和眼镜在线商店:Cronos
2020/06/02 全球购物
Hotels.com韩国:海外国内旅行所需的酒店和住宿预订网站
2020/05/08 全球购物
存储过程的优点有哪些
2012/09/27 面试题
中学自我评价
2014/01/31 职场文书
退伍老兵事迹材料
2014/01/31 职场文书
《得道多助,失道寡助》教学反思
2014/04/19 职场文书
国际贸易系求职信
2014/08/09 职场文书
2016清明节森林防火广播稿
2015/12/17 职场文书
导游词之阳朔遇龙河
2019/12/16 职场文书
Python OpenCV实现图像模板匹配详解
2022/04/07 Python