jquery简单实现tab选项卡效果--转

最新推荐文章于 2025-09-12 16:56:45 发布

转载最新推荐文章于 2025-09-12 16:56:45 发布 · 94 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ghfjj/p/6306309.html

文章标签：

#javascript #ViewUI

本文介绍了一个使用jQuery实现的简单选项卡插件。通过HTML结构定义不同的标签页，并利用jQuery选择器和事件处理功能实现了标签页切换效果。当点击不同标签时，对应的标签和内容会高亮显示。

html：
<ul class="tab">
    <li>最新</li>
    <li class="cur">热门</li>
    <li>新闻</li>
</ul>
<div>11</div>
<div class="on">22</div>
<div>33</div>

js:
  $(document).ready(function(){ 
    $(".tab li").click(function(){ 
        $(".tab li").eq($(this).index()).addClass("cur").siblings().removeClass('cur');
        $("div").hide().eq($(this).index()).show();
       //另一种方法: $("div").eq($(".tab li").index(this)).addClass("on").siblings().removeClass('on');     });
 });

转载于:https://www.cnblogs.com/ghfjj/p/6306309.html