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

来源：互联网发布：mac怎么看文件夹地址编辑：程序博客网时间：2024/06/08 04:16

<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;        }

當站演示
http://www.freejs.net/demo/29/index.html
　

參考自http://www.freejs.net/article_tabbiaoqian_29.html

感恩大大

0 0