首页 / JQUERY / js与jquery分别实现tab标签页功能的方法

js与jquery分别实现tab标签页功能的方法

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了js与jquery分别实现tab标签页功能的方法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1532字，纯文字阅读大概需要3分钟。

内容图文

本文实例讲述了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();
}

内容总结

以上是互联网集市为您收集整理的js与jquery分别实现tab标签页功能的方法全部内容，希望文章能够帮你解决js与jquery分别实现tab标签页功能的方法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/304194.html

来源：【匿名】