JQUERY UI 创建Tab功能控件

最新推荐文章于 2025-04-22 20:36:11 发布

HelloLWei

最新推荐文章于 2025-04-22 20:36:11 发布

阅读量1.6k

点赞数

本文链接：https://blog.youkuaiyun.com/lai123wei/article/details/45766305

版权

该博客展示了如何使用JQUERY UI库创建一个带有多个选项卡的交互式Tab控件。详细步骤包括引入必要的JS和CSS资源，定义Tab的HTML结构，以及编写JavaScript代码来初始化和管理Tab的选中状态和样式。示例代码中还包括了点击不同Tab时更改背景颜色的动态效果。

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

1.效果图

2.实现代码

<head runat="server">
    <title></title>
    <script src="../../Resource/js/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="../../Resource/js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
    <link href="../../Resource/css/smoothness/jquery-ui-1.8.18.custom.css" rel="stylesheet"
        type="text/css" />
    <style type="text/css">
        #container
        {
            margin: 0 auto;
            width: 960px;
        }
        #tabs
        {
            width: 950px;
            margin: 5px auto;
            font-size: 12px;
        }
        #tabs ul a
        {
            background-color: #B6D3F6;
        }
        #tabs ul a:hover
        {
            background-color: #4676CC;
            color: White;
        }
        /* #tabs ul a:visited
        {
            background-color: #4676CC;
            color: White;
        }*/
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="container">
        <div id="tabs">
            <ul>
                <li><a href="#tabs-1">Tabs1</a></li>
                <li><a href="#tabs-2">Tabs2</a></li>
                <li><a href="#tabs-3">Tabs3</a></li>
                <li><a href="#tabs-4">Tabs4</a></li>
            </ul>
            <div id="tabs-1">
                <p>
                    content of tab one</p>
            </div>
            <div id="tabs-2">
                <p>
                    content of tab two</p>
            </div>
            <div id="tabs-3">
                <p>
                    content of tab three</p>
            </div>
            <div id="tabs-4">
                <p>
                    content of tab four</p>
            </div>
        </div>
    </div>
    </form>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#tabs").tabs();
            //动态设定A背景色
            //$("[href='#tabs-1']").css("background-color", "#4676CC").css("color", "white");
            $("#tabs ul li a[href='#tabs-1']").css("background-color", "#4676CC").css("color", "white");//默认选中第一个Tab
            $("#tabs ul li a").click(function () {
                $("#tabs ul li a").each(function () {
                    $(this).css("background-color", "#B6D3F6").css("color", "#222222");
                });
                $(this).css("background-color", "#4676CC").css("color", "white");
            });
        });
    </script>
</body>
</html>