使用jQuery+css实现选项卡切换功能

时间：2021-06-29 02:42:32
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

 <head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>HTML+jQuery+css 选项卡切换更能</title>

<meta name="keywords" content="HTML+jQuery+css 选项卡切换更能<" />

<meta name="description" content="HTML+jQuery+css 选项卡切换更能<" />

<style type="text/css">

    body,ul,li{

        margin: 0;padding: 0;

        font: 12px normal "宋体", Arial, Helvetica, sans-serif;

        list-style: none;

    }

    a{

        text-decoration: none;color: #000;

        font-size: 14px;
        cursor:auto;
     }

    #tabbox{

        width:1000px; overflow:hidden;

        margin:0 auto;

    }

    .tab_conbox{

        border: 1px solid #999;border-top: none;

    }

    .tab_con{

        display:none;

    }

    .tabs{

        height: 32px;border-bottom:1px solid #999;border-left: 1px solid #999;

        width: 100%;

    }

    .tabs li{

        height:31px;line-height:31px;

        float:left;border:1px solid #999;

        border-left:none;

        margin-bottom: -1px;background: #e0e0e0;

        overflow: hidden;position: relative;

    }

    .tabs li a {

        display: block;padding: 0 20px;

        border: 1px solid #fff;outline: none;

    }

    .tabs li a:hover {

        background: #ccc;

    }    

    .tabs .thistab,.tabs .thistab a:hover{

        background: #fff;border-bottom: 1px solid #fff;

    }

    .tab_con {

        padding:12px;font-size: 14px; line-height:175%;

    }

</style>

<script src="http://lib.sinaapp.com/js/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

    $(document).ready(function() {

        jQuery.jqtab = function(tabtit,tabcon) {

            $(tabcon).hide();

            $(tabtit+" li:first").addClass("thistab").show();

            $(tabcon+":first").show();

            $(tabtit+" li").click(function() {

                $(tabtit+" li").removeClass("thistab");

                $(this).addClass("thistab");

                $(tabcon).hide();

                var activeTab = $(this).find("a").attr("tab");

                $("#"+activeTab).fadeIn();

                return false;

            });

        };

        /*调用方法如下：*/

        $.jqtab("#tabs",".tab_con");

    });

</script>

</head>

<body>

    <div id="tabbox">

        <ul class="tabs" id="tabs">

           <li><a tab="tab1">选项卡1</a></li>

           <li><a tab="tab2">选项卡2</a></li>

           <li><a tab="tab3">选项卡3</a></li>

           <li><a tab="tab4">选项卡4</a></li>

        </ul>

        <ul class="tab_conbox">

            <li id="tab1" class="tab_con">

               <p>AAAAA</P>

               <p>111111111111111111111111111111111111111111111111111111</p>

            </li>

            <li id="tab2" class="tab_con">

               <p>BBBBB</P>

               <p>辽宁抚顺新宾</p>

            </li>

            <li id="tab3" class="tab_con">

               <p>Hello world ！</P>

               <p>333333333333333333333333333333333333333333333333</p>

            </li>

            <li id="tab4" class="tab_con">

               <p>CCCCCCCC</P>

               <p>44444444444444444444444444444444444</p></li>

        </ul>

    </div>

</body>

</html>

相关文章