zoukankan      html  css  js  c++  java
  • 左侧点击后右侧添加tab标签栏以及内容

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>左侧点击后右侧添加tab标签栏以及内容</title>
    <script type="text/javascript" src="http://files.cnblogs.com/files/heyiming/jquery-1.8.0.min.js" ></script>
        <style>
     1   @charset "utf-8";
     2         body {
     3             font-family:Lucida Sans, Lucida Sans Unicode, Arial, Sans-Serif;
     4             font-size:13px;
     5             margin:0px auto;
     6         }
     7         #tabs {
     8             margin:0;
     9             padding:0;
    10             list-style:none;
    11             overflow:hidden;
    12         }
    13         #tabs li {
    14             float:left;
    15             display:block;
    16             padding:5px;
    17             background-color:#bbb;
    18             margin-right:5px;
    19         }
    20         #tabs li a {
    21             color:#fff;
    22             text-decoration:none;
    23         }
    24         #tabs li.current {
    25             background-color:#e1e1e1;
    26         }
    27         #tabs li.current a {
    28             color:#000;
    29             text-decoration:none;
    30         }
    31         #tabs li a.remove {
    32             color:#f00;
    33             margin-left:10px;
    34         }
    35         #content {
    36             background-color:#e1e1e1;
    37         }
    38         #content p {
    39             margin: 0;
    40             padding:20px 20px 100px 20px;
    41         }
    42         #main {
    43             width:900px;
    44             margin:0px auto;
    45             overflow:hidden;
    46             background-color:#F6F6F6;
    47             margin-top:20px;
    48             -moz-border-radius:10px;
    49             -webkit-border-radius:10px;
    50             padding:30px;
    51         }
    52         #wrapper, #doclist {
    53             float:left;
    54             margin:0 20px 0 0;
    55         }
    56         #doclist {
    57             width:150px;
    58             border-right:solid 1px #dcdcdc;
    59         }
    60         #doclist ul {
    61             margin:0;
    62             list-style:none;
    63         }
    64         #doclist li {
    65             margin:10px 0;
    66             padding:0;
    67         }
    68         #container {
    69             margin:0;
    70             padding:0;
    71         }
    72         #wrapper {
    73             width:700px;
    74             margin-top:20px;
    75         }
    css代码
    
    
    
        </style>
    </head>
    <body>
    <div id="main">
      <div id="doclist">
        <h2>栏目列表</h2>
        <ul id="container">
          <li><a href="#" rel="焦点图" title="jquery幻灯片,焦点图,banner特效,Flash焦点图_懒人之家">焦点图</a></li>
          <li><a href="#" rel="菜单导航" title="导航菜单,菜单导航,nav标签,导航代码,二级下拉菜单,横向导航,网页菜单,网页导航">菜单导航</a></li>
          <li><a href="#" rel="jquery特效" title="jquery特效,jquery插件库,jquery代码,收集最全的jquery插件特效">jquery特效</a></li>
          <li><a href="#" rel="tab标签" title="tab标签,tab选项卡,多页签代码,选项卡代码">tab标签</a></li>
          <li><a href="#" rel="在线客服" title="QQ在线客服代码,在线客服QQ,在线客服qq代码,右侧漂浮客服">在线客服</a></li>
        </ul>
      </div>
      <div id="wrapper">
        <ul id="tabs">
        </ul>
        <div id="content"> </div>
      </div>
    </div>
    </body>
    </html>
    <script type="text/javascript">
     1 $(document).ready(function() {
     2         $("#container a").click(function() {
     3             addTab($(this));
     4         });
     5 
     6         $('#tabs a.tab').live('click', function() {
     7             // Get the tab name
     8             var contentname = $(this).attr("id") + "_content";
     9 
    10             // hide all other tabs
    11             $("#content p").hide();
    12             $("#tabs li").removeClass("current");
    13 
    14             // show current tab
    15             $("#" + contentname).show();
    16             $(this).parent().addClass("current");
    17         });
    18 
    19         $('#tabs a.remove').live('click', function() {
    20             // Get the tab name
    21             var tabid = $(this).parent().find(".tab").attr("id");
    22 
    23             // remove tab and related content
    24             var contentname = tabid + "_content";
    25             $("#" + contentname).remove();
    26             $(this).parent().remove();
    27 
    28             // if there is no current tab and if there are still tabs left, show the first one
    29             if ($("#tabs li.current").length == 0 && $("#tabs li").length > 0) {
    30 
    31                 // find the first tab
    32                 var firsttab = $("#tabs li:first-child");
    33                 firsttab.addClass("current");
    34 
    35                 // get its link name and show related content
    36                 var firsttabid = $(firsttab).find("a.tab").attr("id");
    37                 $("#" + firsttabid + "_content").show();
    38             }
    39         });
    40     });
    41     function addTab(link) {
    42         // If tab already exist in the list, return
    43         if ($("#" + $(link).attr("rel")).length != 0)
    44             return;
    45 
    46         // hide other tabs
    47         $("#tabs li").removeClass("current");
    48         $("#content p").hide();
    49 
    50         // add new tab and related content
    51         $("#tabs").append("<li class='current'><a class='tab' id='" +
    52         $(link).attr("rel") + "' href='#'>" + $(link).html() +
    53         "</a><a href='#' class='remove'>x</a></li>");
    54 
    55         $("#content").append("<p id='" + $(link).attr("rel") + "_content'>" +
    56         $(link).attr("title") + "</p>");
    57 
    58         // set the newly added tab as current
    59         $("#" + $(link).attr("rel") + "_content").show();
    60     }
    js代码
    </script>

    效果图:

  • 相关阅读:
    命令行查看memcached的运行状态(转载)
    有类与无类路由下的路由匹配原则(转载)
    数据结构实验之求二叉树后序遍历和层次遍历(SDUT 2137)
    还是畅通工程(HDU 1233)
    还是畅通工程(HDU 1233)
    Financial Management(SDUT 1007)
    Financial Management(SDUT 1007)
    二分图的最大匹配、完美匹配和匈牙利算法
    二分图的最大匹配、完美匹配和匈牙利算法
    求二叉树的层次遍历(SDUT 2824)
  • 原文地址:https://www.cnblogs.com/heyiming/p/6600103.html
Copyright © 2011-2022 走看看