JQuery Tabs 学习——简单切换

本文介绍了一种使用CSS和JavaScript实现的简易Tab切换效果。通过简单的HTML结构配合样式和脚本，可以轻松创建动态Tab内容切换功能，适用于网页中需要展示不同类别内容的场景。

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

tabs简单切换

页面样式css+js

<style type="text/css">
        #rdxw
        {
            width: 358px;
            height: 343px;
            border: #CCCCCC 1px solid;
            float: left;
            background: url(ba_011.gif) no-repeat;
            display: inline;
        }
        #rdxw .title
        {
            width: 358px;
            height: 30px;
            line-height: 30px;
        }
        #rdxw .news
        {
            width: 358px;
            height: 313px;
            display: block;
        }
        #rdxw .news ul
        {
            width: 340px;
            margin: 0;
            padding: 0;
            margin: 0 auto;
            margin-top: 15px;
        }
        #rdxw .news li
        {
            line-height: 18px;
            text-align: left;
            list-style-type: none;
            white-space: nowrap;
            overflow: hidden;
            width: 308px;
            font-size: 14px;
            color: #666;
        }
        #rdxw a
        {
            text-decoration: none;
        }
        #rdxw ul
        {
            list-style-type: none;
            float: right;
            margin: 0;
            padding: 0;
        }
        #rdxw .title li
        {
            width: 75px;
            height: 28px;
            float: left;
            list-style-type: none;
            white-space: nowrap;
            line-height: 28px;
            margin-top: 2px;
            text-align: center;
            font-size: 14px;
            font-weight: bold;
            cursor:pointer;
        }
        #rdxw .title a
        {
            color: #666666;
        }
        #rdxw .t_title
        {
            float: left;
            background: url(ba_012.gif);
            width: 75px;
            height: 28px;
        }
        #rdxw .t_title a
        {
            color: #FFFFFF;
        }
        #rdxw .title a:hover
        {
            text-decoration: none;
            cursor: pointer;
            color: #FFFFFF;
        }
    </style>

<script src="../../js/jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        //Tabs
        $(function() {
            var $title = $(".title ul li");
            var $content = $("#rdxw .news");
            $title.mousemove(function() {
                var index = $title.index($(this));
                $(this).addClass("t_title").siblings().removeClass("t_title");
                $content.hide();
                $($content.get(index)).show();
                return false;
            });
        });
    </script>

<div id="rdxw">
            <div class="title">
                <ul>
                    <li id="rdxw_title" class="t_title" runat="server"><a href="#">11111</a></li>
                    <li id="hyzx_title" runat="server"><a href="#">22222</a></li>
                </ul>
            </div>
            <div class="news">
                <ul>
                    <li><a href="#">111111</a></li>
                    <li><a href="#">111111</a></li>
                    <li><a href="#">111111</a></li>
                    <li><a href="#">111111</a></li>
                    <li><a href="#">111111</a></li>
                    <li><a href="#">111111</a></li>
                </ul>
            </div>
            <div class="news" style="display: none;">
                <ul>
                    <li><a href="#">222222</a></li>
                    <li><a href="#">222222</a></li>
                    <li><a href="#">222222</a></li>
                    <li><a href="#">222222</a></li>
                    <li><a href="#">222222</a></li>
                    <li><a href="#">222222</a></li>
                </ul>
            </div>
        </div>