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 弹出登录窗口实现代码
Dec 24 Javascript
修改jquery.lazyload.js实现页面延迟载入
Dec 22 Javascript
Jquery submit()无法提交问题
Apr 21 Javascript
javacript使用break内层跳出外层循环分析
Jan 12 Javascript
jquery合并表格中相同文本的相邻单元格
Jul 17 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
Aug 05 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
Nov 18 Javascript
了解JavaScript中let语句
May 30 Javascript
浅谈ECMAScript 中的Array类型
Jun 10 Javascript
vue实现日历备忘录功能
Sep 24 Javascript
解决ant Design Search无法输入内容的问题
Oct 29 Javascript
JS实现刷新网页后之前浏览位置保持不变示例详解
Aug 14 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的ob_start() 控制您的浏览器cache
2009/08/03 PHP
Blitz templates 最快的PHP模板引擎
2010/04/06 PHP
PHP生成不重复随机数的方法汇总
2014/11/19 PHP
php 类自动载入的方法
2015/06/03 PHP
php实现微信模拟登陆、获取用户列表及群发消息功能示例
2017/06/28 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
thinkPHP5.0框架事务处理操作简单示例
2018/09/07 PHP
Laravel 实现Controller向blade前台模板赋值的四种方式小结
2019/10/22 PHP
禁止JQuery中的load方法装载IE缓存中文件的方法
2009/09/11 Javascript
使用jQuery模板来展现json数据的代码
2010/10/22 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
2013/08/13 Javascript
jQuery使用$.ajax提交表单完整实例
2015/12/11 Javascript
js实现文本框输入文字个数限制代码
2015/12/25 Javascript
全屏js头像上传插件源码高清版
2016/03/29 Javascript
JS iFrame加载慢怎么解决
2016/05/13 Javascript
jQuery与JS加载事件用法分析
2016/09/04 Javascript
Vue组件实例间的直接访问实现代码
2017/08/20 Javascript
JS中的BOM应用
2018/02/02 Javascript
在HTML文档中嵌入JavaScript的四种方法
2018/05/07 Javascript
vue增加强缓存和版本号的实现方法
2019/05/01 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
2019/07/23 Javascript
ES6学习笔记之let与const用法实例分析
2020/01/22 Javascript
JavaScript实现随机点名器
2020/03/25 Javascript
[10:05]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD 选手采访
2021/03/11 DOTA
Python中用于返回绝对值的abs()方法
2015/05/14 Python
Python pyinotify日志监控系统处理日志的方法
2018/03/08 Python
基于Python实现ComicReaper漫画自动爬取脚本过程解析
2019/11/11 Python
详解pandas中利用DataFrame对象的.loc[]、.iloc[]方法抽取数据
2020/12/13 Python
CSS3的Border-radius轻松制作圆角
2012/12/24 HTML / CSS
国外平面设计素材网站:The Hungry JPEG
2017/03/28 全球购物
项目合作协议书范本
2014/04/16 职场文书
化工实习心得体会
2014/09/09 职场文书
不尊敬老师检讨书范文
2014/11/19 职场文书
2014企业年终工作总结
2014/12/23 职场文书
高三复习计划
2015/01/19 职场文书
CSS 鼠标点击拖拽效果的实现代码
2022/12/24 HTML / CSS