Maison > Article > interface Web > js与jquery分别实现tab标签页功能的方法

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

高洛峰original: 2016-12-06 14:39:161404parcourir

本文实例讲述了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(&#39;myul&#39;);
var li = ul.getElementsByTagName(&#39;li&#39;);
var con = document.getElementById(&#39;container&#39;);
var div = con.getElementsByTagName(&#39;div&#39;);
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 = &#39;&#39;;
    div[j].style.display = &#39;none&#39;;
  }
  this.className = &#39;ssl&#39;;
  div[this.index].style.display=&#39;block&#39;;
}
</script>

那我们改用jquery实现代码如下

$(&#39;#myul li&#39;).click(choose);
$(&#39;#myul li&#39;).hover(choose);
function choose(){
  $(this).addClass(&#39;ssl&#39;).siblings().removeClass(&#39;ssl&#39;);
  $(&#39;#container div&#39;).eq($(this).index()).show().siblings().hide();
}

其实函数还可以简化：

function choose(){
  $(this).addClass(&#39;ssl&#39;).siblings().removeClass(&#39;ssl&#39;).parent().next().children().eq($(this).index()).show().siblings().hide();
}

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：jQuery和JavaScript节点插入元素的方法对比Article suivant：浅谈javascript中遇到的字符串对象处理

Articles Liés

Voir plus