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 相关文章推荐
use jscript with List Proxy Server Information
Jun 11 Javascript
js跳转页面方法实现汇总
Feb 11 Javascript
JavaScript面向对象之私有静态变量实例分析
Jan 14 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
May 09 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
Jul 27 Javascript
JS 拦截全局ajax请求实例解析
Nov 29 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
JavaScript实现重力下落与弹性效果的方法分析
Dec 20 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
Feb 03 Javascript
vue2.0 可折叠列表 v-for循环展示的实例
Sep 07 Javascript
在HTML中使用JavaScript的两种方法
Dec 24 Javascript
详解uniapp的全局变量实现方式
Jan 11 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配合jquery实现增删操作具体实例
2013/12/12 PHP
使用php显示搜索引擎来的关键词
2014/02/13 PHP
windows7下安装php的imagick和imagemagick扩展教程
2014/07/04 PHP
PHP程序员不应该忽略的3点
2015/10/09 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
PHP实现普通hash分布式算法简单示例
2018/08/06 PHP
JavaScript初学者建议:不要去管浏览器兼容
2014/02/04 Javascript
javascript面向对象之this关键词用法分析
2015/01/13 Javascript
javascript与css3动画结合使用小结
2015/03/11 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
2015/04/07 Javascript
深入解析JavaScript的闭包机制
2015/10/20 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
2016/11/10 Javascript
jquery实现输入框实时输入触发事件代码
2016/12/21 Javascript
Angularjs自定义指令Directive详解
2017/05/27 Javascript
详解JavaScript中的六种错误类型
2017/09/21 Javascript
jQuery控制input只能输入数字和两位小数的方法
2019/05/16 jQuery
Openlayers显示瓦片网格信息的方法
2020/09/28 Javascript
[01:01:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第一场 3月4日
2021/03/11 DOTA
[01:11:46]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第一场 2月23日
2021/03/11 DOTA
python中的闭包用法实例详解
2015/05/05 Python
python 编程之twisted详解及简单实例
2017/01/28 Python
python自动化测试之DDT数据驱动的实现代码
2019/07/23 Python
python自动化工具之pywinauto实例详解
2019/08/26 Python
如何基于Python实现自动扫雷
2020/01/06 Python
Jupyter安装拓展nbextensions及解决官网下载慢的问题
2021/03/03 Python
CSS3中的元素过渡属性transition示例详解
2016/11/30 HTML / CSS
Gina Bacconi官网:吉娜贝康尼连衣裙和礼服
2018/04/24 全球购物
澳大利亚家庭花园和DIY工具网店:VidaXL
2019/05/03 全球购物
联想C++笔试题
2012/06/13 面试题
UNIX操作系统结构由哪几部分组成
2016/02/17 面试题
企业三严三实学习心得体会
2014/10/13 职场文书
创先争优活动个人总结
2015/03/04 职场文书
小学生禁毒教育心得体会
2016/01/15 职场文书
《我的长生果》教学反思
2016/02/20 职场文书
前端学习——JavaScript原生实现购物车案例
2021/03/31 Javascript
正确的理解和使用Django信号(Signals)
2021/04/14 Python