简单的jquery选项卡插件

最新推荐文章于 2022-06-21 20:05:35 发布

北化

最新推荐文章于 2022-06-21 20:05:35 发布

阅读量424

点赞数

分类专栏： Jquery 文章标签： java web

本文链接：https://blog.csdn.net/u012289441/article/details/42147261

版权

Jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <style type="text/css">
        a {
            text-decoration: none;
        }
        ul, li, p {
            list-style-type: none;
            margin: 0px;
            padding: 0px;
            font-size: 12px;
        }
        #tabs {
            width: 600px;
            border: solid 1px #dddddd;
            margin: 50px auto;
            padding: 5px;
            overflow: hidden;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
            border-bottom-left-radius: 4px;
            border-bottom-right-radius: 4px;
        }
        #tabs ul.tabs_header {
            display: block;
            position: relative;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
            border: 1px solid #aaaaaa;
            background-color: #cccccc;
            padding: 5px 5px 0px;
            clear: both;
            height: 26px;
            line-height: 26px;
        }
        #tabs ul.tabs_header li {
            border: solid 1px #d3d3d3;
            border-bottom: 0 none !important;
            float: left;
            list-style: none outside none;
            margin: 0px 5px;
            position: relative;
            top: 1px;
            height: 24px; 
            /*此处要加上背景颜色，否则ie6下没有边框,（奇怪）有时在ie6下边框会不出现，刚刚又试了了一下居然又不出现问题了*/
            background-color: #F2F2F2; 
            /*圆角样式，较新版本的浏览器才支持，ff8.0支持，ie只有ie9支持*/
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
            padding: 0px 5px;
        }
        #tabs .tabs_header li a {
            color: #333;
        }
        #tabs .tabs_header li.hover {
            border: solid 1px #AAAAAA;
            background-color: #E4E4E4;
        }
        #tabs .tabs_header li.active {
            padding-bottom: 1px;
            margin-bottom: 0px;
            border: solid 1px #AAAAAA;
            background-color: #FFFFFF;
        }
        
        #tabs div.tabs_content {
            border: solid 1px #AAAAAA;
            padding: 10px;
            border-top: none;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="tabs">
        <ul class="tabs_header">
            <li><a href="###">选项卡一</a></li>
            <li><a href="###">选项卡二</a></li>
            <li><a href="###">选项卡三</a></li>
        </ul>
        <div class="tabs_content">
            <p>
                这是选项卡一的内容？<br />
                这是选项卡一的内容？<br />
                这是选项卡一的内容？<br />
                这是选项卡一的内容？<br />
                这是选项卡一的内容？<br />
                这是选项卡一的内容？<br />
                这是选项卡一的内容？
            </p>
        </div>
        <div class="tabs_content">
            <p>
                这是选项卡二的内容？<br />
                这是选项卡二的内容？<br />
                这是选项卡二的内容？<br />
                这是选项卡二的内容？<br />
                这是选项卡二的内容？<br />
                这是选项卡二的内容？<br />
                这是选项卡二的内容？
            </p>
        </div>
        <div class="tabs_content">
            <p>
                这是选项卡三的内容？<br />
                这是选项卡三的内容？<br />
                这是选项卡三的内容？<br />
                这是选项卡三的内容？<br />
                这是选项卡三的内容？<br />
                这是选项卡三的内容？<br />
                这是选项卡三的内容？
            </p>
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#tabs").tabs();
        });
    </script>
    <script type="text/javascript">
        
        (function ($) {
            $.fn.tabs = function () {
                var content = this.find("div");
                var list = this.find("ul.tabs_header").find("li");
                content.hide();
                content.eq(0).show();
                list.eq(0).addClass("active");
                list.each(function (i) {
                    $(this).bind({
                        click: function () {
                            list.removeClass("active");
                            content.hide();
                            content.eq(i).css("display", "");
                            $(this).addClass("active");
                        },
                        mousemove: function () {
                            $(this).addClass("hover");
                        },
                        mouseout: function () {
                            $(this).removeClass("hover");
                        }
                    });
                });
            }
        })(jQuery);
		
    </script>
</body>
</html>