用jQuery实现选tab项卡效果_jquery 订单tab-CSDN博客

本文链接：https://blog.csdn.net/wangweiscsdn/article/details/53762606

本文介绍了一个使用jQuery实现的简单Tab标签切换效果。通过CSS样式美化界面，并借助jQuery简化DOM操作，实现了平滑的标签切换功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery实现tab标签切换效果</title>
    <script src="jquery/jquery 2.0.3/jquery-2.0.3.min.js"></script>
<style>
*{ margin:0; padding:0;list-style: none;}
body {font:12px/1.5 Tahoma;}
#outer {width:450px;margin:150px auto;}
#tab {overflow:hidden;zoom:1;background:#afd;border:1px solid #afd;}
#tab li {float:left;color:#000;height:30px; cursor:pointer; line-height:30px;padding:0 20px;}
#tab li.current {color:#afd;background:#d9f;}
#content {border:1px solid #afd;border-top-width:0;}
#content ul {line-height:25px;display:none; margin:0 30px;padding:10px 0;}
</style>
</head>
<body>
<div id="outer">
    <ul id="tab">
        <li class="current">tab1</li>
        <li>tab2</li>
        <li>tab3</li>
    </ul>
    <div id="content">
        <ul style="display:block;">
           <a href="">内容111</a>
        </ul>
        <ul>
            <a href="">内容222</a>
        </ul>
        <ul>
           <a href="">内容333</a>
        </ul>
    </div>
</div>
<script>
    $(function(){
        window.onload = function()
        {
            var $a = $('#tab li');
            var $b = $('#content ul');
                        
            $a.click(function(){
                var $this = $(this);//$(this)表示把$a转换为jQuery对象，然后赋值给$this这个变量
                var $t = $this.index();//相当于$this的兄弟元素赋值给 $t
                $a.removeClass();
                $this.addClass('current');
                $b.css('display','none');
                $b.eq($t).css('display','block');//遍历$t
            })
        }
    });
</script>
</body>
</html>