脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js与jquery分别实现tab标签页功能

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

 更新时间：2016年11月18日 11:38:55   作者：栁罗风尘  
这篇文章主要介绍了js与jquery分别实现tab标签页功能的方法,结合实例形式对比分析了javascript与jQuery分别实现tab标签功能的操作技巧,需要的朋友可以参考下

本文实例讲述了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切换特效与技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • Bootstrap每天必学之导航条(二)

    Bootstrap每天必学之导航条(二)

    Bootstrap每天必学之导航条，进一步向大家讲解了导航条养殖，以及导航条中元素的使用方法，感兴趣的小伙伴们可以参考一下
    2016-03-03
  • Javascript绝句欣赏 一些经典的js代码

    Javascript绝句欣赏 一些经典的js代码

    Javascript绝句欣赏 一些经典的js代码整理，学习js的朋友可以参考下
    2012-02-02
  • 仿猪八戒网左下角的文字滚动效果

    仿猪八戒网左下角的文字滚动效果

    觉得猪八戒网左下角的文字滚动，效果不错！自己摸索了一下，以自己的方法实现了！没有运用jQuery,不过用了自己的编写的Js库！
    2011-10-10
  • 浅析JavaScript中var that=this

    浅析JavaScript中var that=this

    this是Javascript语言的一个关键字。它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。接下来通过本文给大家分享JavaScript中var that=this所代表的意思，需要的朋友参考下吧
    2017-02-02
  • JS寄快递地址智能解析的实现代码

    JS寄快递地址智能解析的实现代码

    这篇文章主要介绍了JS寄快递地址智能解析,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-07-07
  • js for循环倒序输出数组元素的实例

    js for循环倒序输出数组元素的实例

    下面小编就为大家带来一篇js for循环倒序输出数组元素的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • bootstrap组件之按钮式下拉菜单小结

    bootstrap组件之按钮式下拉菜单小结

    这篇文章主要介绍了bootstrap组件之按钮式下拉菜单，包括单按钮下拉菜单，分裂式下拉菜单和向上弹出式菜单，本文给大家介绍的非常详细，需要的朋友参考下吧
    2017-01-01
  • JavaScript连接组件实现打印功能

    JavaScript连接组件实现打印功能

    这篇文章主要为大家详细介绍了JavaScript如何连接连接抖音打印组件实现打印小票功能,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下
    2024-04-04
  • JavaScript实现瀑布流布局的代码分享

    JavaScript实现瀑布流布局的代码分享

    不知道大家在线上购物的时候有没有发现到，自己逛起来根本就停不下来，越往下翻越是觉得就会出现需要的东西，这就是很多电商公司都在使用的瀑布流布局。本文就来用JS实现这一布局，需要的可以参考一下
    2023-04-04
  • 基于JavaScript实现随机点名器

    基于JavaScript实现随机点名器

    这篇文章主要介绍了基于JavaScript实现随机点名器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-02-02

最新评论