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 相关文章推荐
基于jquery的一个浮动框(扩展性比较好 )
Aug 27 Javascript
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
Jan 09 Javascript
jQuery表格插件datatables用法总结
Sep 05 Javascript
javascript实现当前页导航激活的方法
Feb 27 Javascript
基于jquery实现省市联动效果
Nov 23 Javascript
基于Bootstrap的网页设计实例
Mar 01 Javascript
Vue.Draggable实现拖拽效果
Jul 29 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
Mar 21 Javascript
实例详解vue中的$root和$parent
Apr 29 Javascript
JavaScript队列结构Queue实现过程解析
Mar 07 Javascript
解决vue页面渲染但dom没渲染的操作
Jul 27 Javascript
JavaScript实现原型封装轮播图
Dec 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语法自动检查的Vim插件
2014/08/11 PHP
php可应用于面包屑导航的递归寻找家谱树实现方法
2015/02/02 PHP
PHP执行SQL文件并将SQL文件导入到数据库
2015/09/17 PHP
基于yaf框架和uploadify插件,做的一个导入excel文件,查看并保存数据的功能
2017/01/24 PHP
php使用curl伪造浏览器访问操作示例
2019/09/30 PHP
php生成随机数/生成随机字符串的方法小结【5种方法】
2020/05/27 PHP
JS下拉缓冲菜单示例代码
2013/08/30 Javascript
javascript中使用正则计算中文长度的例子
2014/04/29 Javascript
调整小数的格式保留小数点后两位
2014/05/14 Javascript
jquery中map函数与each函数的区别实例介绍
2014/06/23 Javascript
FullCalendar日历插件应用之数据展现(一)
2015/12/23 Javascript
基于JS实现的随机数字抽签实例
2016/12/08 Javascript
Node中使用ES6语法的基础教程
2018/01/05 Javascript
vue实现简单的星级评分组件源码
2018/11/16 Javascript
7个好用的JavaScript技巧分享(译)
2019/05/07 Javascript
layui的layedit富文本赋值方法
2019/09/18 Javascript
在JavaScript中实现链式调用的实现
2019/12/24 Javascript
pyv8学习python和javascript变量进行交互
2013/12/04 Python
Python检测一个对象是否为字符串类的方法
2015/05/21 Python
Python脚本实时处理log文件的方法
2016/11/21 Python
基于python实现的百度新歌榜、热歌榜下载器(附代码)
2019/08/05 Python
python 创建一维的0向量实例
2019/12/02 Python
python 消除 futureWarning问题的解决
2019/12/25 Python
mac使用python识别图形验证码功能
2020/01/10 Python
python中append函数用法讲解
2020/12/11 Python
CSS3中的transform属性进行2D和3D变换的基本用法
2016/05/12 HTML / CSS
P D PAOLA意大利官网:西班牙著名的珠宝首饰品牌
2019/09/24 全球购物
写一个方法1000的阶乘
2012/11/21 面试题
2014初中数学教研组工作总结
2014/12/19 职场文书
佛光寺导游词
2015/02/10 职场文书
2015秋季开学典礼演讲稿
2015/07/16 职场文书
Nginx虚拟主机的配置步骤过程全解
2022/03/31 Servers
使用Python拟合函数曲线
2022/04/14 Python
Oracle 多表查询基本语法实例
2022/04/18 Oracle
Mysql 数据库中的 redo log 和 binlog 写入策略
2022/04/26 MySQL
图神经网络GNN算法
2022/05/11 Python