网页设计% js ajax Tab菜单切换

最新推荐文章于 2021-08-06 12:14:09 发布

chienweiluo

最新推荐文章于 2021-08-06 12:14:09 发布

阅读量1.2k

点赞数

分类专栏： JS互動/演示文章标签： ajax tab web free-js

JS互動/演示专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<html>
<head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <script src="js/jquery-1.9.1.min.js"></script> <!--PATH-->
</head>
<body>
<div class="container">  

    <ul class="tabs">  
        <li class="active"><a href="#tab1">导航菜单</a></li>  
        <li><a href="#tab4">TAB标签</a></li>  
    </ul>  
    <div class="tab_container">  
        <div id="tab1" class="tab_content" style="display: block; ">  

          <h3><a href="http://www.freejs.net/article_daohangcaidan_13.html">jquery css多级下拉菜单</a></h3>  
            <p id="">XXXXXXXXXXXXXX</p>  
        </div>  

        <div id="tab4" class="tab_content" style="display: none; ">  
            <h2>各种tab卡</h2>  
            <h3><a href="http://www.freejs.net/article_tabbiaoqian_17.html">tab标签页面,ajax载入</a></h3>  

            <p> tab标签，jquery ajax载入数据库</p>  
        </div>  
    </div>   
</div>   
</body>
</html>

$(document).ready(function() {  

    //Default Action  
    $(".tab_content").hide(); //Hide all content  
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab  
    $(".tab_content:first").show(); //Show first tab content  

    //On Click Event  
    $("ul.tabs li").click(function() {  
        $("ul.tabs li").removeClass("active"); //Remove any "active" class  
        $(this).addClass("active"); //Add "active" class to selected tab  
        $(".tab_content").hide(); //Hide all tab content  
        var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content  
        $(activeTab).fadeIn(); //Fade in the active content  
        return false;  
    });  

});

        .container {
            width: 500px;
            margin: 10px auto;
        }

        ul.tabs {
            margin: 0;
            padding: 0;
            float: left;
            list-style: none;
            height: 32px;
            border-bottom: 1px solid #999;
            border-left: 1px solid #999;
            width: 100%;
        }

        ul.tabs li {
            float: left;
            margin: 0;
            padding: 0;
            height: 31px;
            line-height: 31px;
            border: 1px solid #999;
            border-left: none;
            margin-bottom: -1px;
            background: #e0e0e0;
            overflow: hidden;
            position: relative;
        }

        ul.tabs li a {
            text-decoration: none;
            color: #000;
            display: block;
            font-size: 1.2em;
            padding: 0 20px;
            border: 1px solid #fff;
            outline: none;
        }

        ul.tabs li a:hover {
            background: #ccc;
        }

        html ul.tabs li.active,
        html ul.tabs li.active a:hover {
            background: #fff;
            border-bottom: 1px solid #fff;
        }

        .tab_container {
            border: 1px solid #999;
            border-top: none;
            clear: both;
            float: left;
            width: 100%;
            background: #fff;
            -moz-border-radius-bottomright: 5px;
            -khtml-border-radius-bottomright: 5px;
            -webkit-border-bottom-right-radius: 5px;
            -moz-border-radius-bottomleft: 5px;
            -khtml-border-radius-bottomleft: 5px;
            -webkit-border-bottom-left-radius: 5px;
        }

        .tab_content {
            padding: 20px;
            font-size: 1.2em;
        }

        .tab_content h2 {
            font-weight: normal;
            padding-bottom: 10px;
            border-bottom: 1px dashed #ddd;
            font-size: 1.8em;
        }

        .tab_content h3 a {
            color: #254588;
        }

        .tab_content img {
            float: left;
            margin: 0 20px 20px 0;
            border: 1px solid #ddd;
            padding: 5px;
        }　
        html,
        body,
        div,
        span,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        p,
        pre,
        a,
        code,
        em,
        img,
        small,
        strong,
        sub,
        sup,
        u,
        i,
        center,
        dl,
        dt,
        dd,
        ol,
        ul,
        li,
        fieldset,
        form,
        label {
            margin: auto;
            padding: 0;
            border: 0;
            outline: 0;
            font-size: 100%;
            vertical-align: baseline;
            background: transparent
        }

        h2 {
            text-align: center;
            padding: 10px;
            font-size: 20px;
        }

        a {
            color: #007bc4/*#424242*/
            ;
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline
        }

        ol,
        ul {
            list-style: none
        }

        table {
            border-collapse: collapse;
            border-spacing: 0
        }

        body {
            height: 100%;
            font: 12px;
            sans-serif;
            color: #51555C;
            background: #2C2C2C
        }

        img {
            border: none
        }

        .logo {
            width: 910px;
        }

        #main_demo {
            width: 910px;
            min-height: 600px;
            margin: 30px auto 0 auto;
            background: #fff;
            -moz-border-radius: 12px;
            -khtml-border-radius: 12px;
            -webkit-border-radius: 12px;
            border-radius: 12px;
        }

        .ad {
            text-align: center;
            margin-top: 25px;
        }

        .clear {
            clear: both;
        }