<!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>
   @charset "utf-8";

         body {

             font-family:Lucida Sans, Lucida Sans Unicode, Arial, Sans-Serif;

             font-size:13px;

             margin:0px auto;

         }

         #tabs {

             margin:;

             padding:;

             list-style:none;

             overflow:hidden;

         }

         #tabs li {

             float:left;

             display:block;

             padding:5px;

             background-color:#bbb;

             margin-right:5px;

         }

         #tabs li a {

             color:#fff;

             text-decoration:none;

         }

         #tabs li.current {

             background-color:#e1e1e1;

         }

         #tabs li.current a {

             color:#000;

             text-decoration:none;

         }

         #tabs li a.remove {

             color:#f00;

             margin-left:10px;

         }

         #content {

             background-color:#e1e1e1;

         }

         #content p {

             margin:;

             padding:20px 20px 100px 20px;

         }

         #main {

             width:900px;

             margin:0px auto;

             overflow:hidden;

             background-color:#F6F6F6;

             margin-top:20px;

             -moz-border-radius:10px;

             -webkit-border-radius:10px;

             padding:30px;

         }

         #wrapper, #doclist {

             float:left;

             margin:0 20px 0 0;

         }

         #doclist {

             width:150px;

             border-right:solid 1px #dcdcdc;

         }

         #doclist ul {

             margin:;

             list-style:none;

         }

         #doclist li {

             margin:10px 0;

             padding:;

         }

         #container {

             margin:;

             padding:;

         }

         #wrapper {

             width:700px;

             margin-top:20px;

         }

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">






 $(document).ready(function() {

         $("#container a").click(function() {

             addTab($(this));

         });

         $('#tabs a.tab').live('click', function() {

             // Get the tab name

             var contentname = $(this).attr("id") + "_content";

             // hide all other tabs

             $("#content p").hide();

             $("#tabs li").removeClass("current");

             // show current tab

             $("#" + contentname).show();

             $(this).parent().addClass("current");

         });

         $('#tabs a.remove').live('click', function() {

             // Get the tab name

             var tabid = $(this).parent().find(".tab").attr("id");

             // remove tab and related content

             var contentname = tabid + "_content";

             $("#" + contentname).remove();

             $(this).parent().remove();

             // if there is no current tab and if there are still tabs left, show the first one

             if ($("#tabs li.current").length == 0 && $("#tabs li").length > 0) {

                 // find the first tab

                 var firsttab = $("#tabs li:first-child");

                 firsttab.addClass("current");

                 // get its link name and show related content

                 var firsttabid = $(firsttab).find("a.tab").attr("id");

                 $("#" + firsttabid + "_content").show();

             }

         });

     });

     function addTab(link) {

         // If tab already exist in the list, return

         if ($("#" + $(link).attr("rel")).length != 0)

             return;

         // hide other tabs

         $("#tabs li").removeClass("current");

         $("#content p").hide();

         // add new tab and related content

         $("#tabs").append("<li class='current'><a class='tab' id='" +

         $(link).attr("rel") + "' href='#'>" + $(link).html() +

         "</a><a href='#' class='remove'>x</a></li>");

         $("#content").append("<p id='" + $(link).attr("rel") + "_content'>" +

         $(link).attr("title") + "</p>");

         // set the newly added tab as current

         $("#" + $(link).attr("rel") + "_content").show();

     }




js代码


</script>




效果图：


												


											
左侧点击后右侧添加tab标签栏以及内容的更多相关文章
	

    
								
  1. ionic js 侧栏菜单 把主要内容区域从一边拖动到另一边，来让左侧或右侧的侧栏菜单进行切换
		
    ionic 侧栏菜单 一个容器元素包含侧边菜单和主要内容.通过把主要内容区域从一边拖动到另一边,来让左侧或右侧的侧栏菜单进行切换. 效果图如下所示: 用法 要使用侧栏菜单,添加一个父元素<ion ...
    
		
    2. 
						
  2. C# WPF 左侧菜单右侧内容布局效果实现
		
    原文:C# WPF 左侧菜单右侧内容布局效果实现 我们要做的效果是这样的,左侧是可折叠的菜单栏,右侧是内容区域,点击左侧的菜单项右侧内容区域则相应地切换. wpf实现的话,我的办法是用一个tabcon ...
    
		
    3. 
						
  3. BootStrap实现左侧或右侧竖式tab选项卡
		
    BootStrap实现左侧或右侧竖式tab选项卡 代码如下: <div style="height: 100px;"> <div class="col- ...
    
		
    4. 
						
  4. python 添加tab补全
		
    在平时查看Python方法用到tab补全还是很方便的. 1. mac 平台 配置如下: mac是类Unix平台,需要在添加一条配置内容到bash_profile 中(默认是没有这个文件,可以新建一个放 ...
    
		
    5. 
						
  5. bootstrap动态添加Tab标签页
		
    好久没有写博客了(主要是懒),工作中用到一个动态添加Tab的功能,众所周知,bootstrap没有动态添加Tab的功能,网上又没找到什么好用的,那咱就自己写呗?(因为懒,所以只写了添加的方法.(๑&g ...
    
		
    6. 
						
  6. 通过编写串口助手工具学习MFC过程——（七）添加Tab Control控件
		
    通过编写串口助手工具学习MFC过程 因为以前也做过几次MFC的编程,每次都是项目完成时,MFC基本操作清楚了,但是过好长时间不再接触MFC的项目,再次做MFC的项目时,又要从头开始熟悉.这次通过做一个 ...
    
		
    7. 
						
  7. python添加tab键提示
		
    新建一个tab.py脚本 #!/usr/bin/python import sys import readline import rlcompleter import atexit import os ...
    
		
    8. 
						
  8. 解决easyui-tab添加tab滚动条问题
		
    //添加tab var addTab = function (title, url, icon) { if (!$('#mainTab').tabs('exists', title)) { $('#m ...
    
		
    9. 
						
  9. Android两种为ViewPager+Fragment添加Tab的方式
		
    在Android开发中ViewPager的使用是非常广泛的,而它不仅仅能够实现简单的开始引导页,还可以结合Fragment并添加Tab作为选项卡或为显示大批量页面实现强大的顺畅滑动 下面介绍两种为Vi ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. HDU-6278-Jsut$h$-index（主席树）
			
    链接: https://vjudge.net/problem/HDU-6278 题意: The h-index of an author is the largest h where he has a ...
    
			
    2. 
						
  2. SonarQube规则之坏味道类型
			
    1.Abbreviation As Word In Name (默认 关闭)坏味道 主要检查验证标识符名称中的缩写(连续大写字母)长度,还允许执行骆驼案例命名allowedAbbreviationLe ...
    
			
    3. 
						
  3. React Native 中 static的navigationOptions中的点击事件不能用this
			
    想在某个页面中设置导航栏,title + 左右按钮(按钮上肯定需要有事件) static navigationOptions = ({ navigation, navigationOptions }) ...
    
			
    4. 
						
  4. STM32开发板的TIM3开启和关闭
			
    关闭定时器中断要考虑好多情况 1)关闭定时器时,定时器是否在处在工作状态 2)关闭定时器时,定时器是否正好进入中断,造成关闭程序出现断层,进而无法实现完整关闭程序,此时可以使用高一级别的外部中断强制进 ...
    
			
    5. 
						
  5. POJ 2112 Optimal Milking ( 经典最大流 && Floyd && 二分 )
			
    题意 : 有 K 台挤奶机器,每台机器可以接受 M 头牛进行挤奶作业,总共有 C 头奶牛,机器编号为 1~K,奶牛编号为 K+1 ~ K+C ,然后给出奶牛和机器之间的距离矩阵,要求求出使得每头牛都能 ...
    
			
    6. 
						
  6. Seata简单介绍及其原理(一)
			
    Seata 是什么? Seata 是一款开源的分布式事务解决方案,致力于提供高性能和简单易用的分布式事务服务.Seata 将为用户提供了 AT.TCC.SAGA 和 XA 事务模式,为用户打造一站式的 ...
    
			
    7. 
						
  7. D. White Lines
			
    D. White Lines 给定一个$n\times n$的$WB$矩阵,给定一个$k*k$的能把$B$变成$W$的橡皮擦,求橡皮擦作用一次后,全为$W$的行.列总数最大值 前缀和差分 #inclu ...
    
			
    8. 
						
  8. 使用Git上传本地项目到http://git.oschina.net
			
    本文前言,因倡导开源精神,我也把代码传上了开源社区,可是,当初使用http://git.oschina.net 网站上传代码的时候不知道使用工具.我竟然一个文件一个文件复制粘贴,可费了我好大一个劲儿, ...
    
			
    9. 
						
  9. 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_09 序列化流_2_对象的序列化流_ObjectOutputStream
			
    创建person对象.生成构造方法全参和无参.getter和setter 抛出异常:没有序列化异常 接口的源码 啥都没有.就起到一个标记的作用 用二进制存的
    
			
    10. 
						
  10. 阶段1 语言基础+高级_1-3-Java语言高级_1-常用API_1_第5节 String类_10_练习：统计输入的字符串中
			
    char类型在发生数学运算的时候,可以提升为int类型 这就表示char在A到Z之间的
    
			
    11.