左侧点击后右侧添加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>
@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标签栏以及内容的更多相关文章
- ionic js 侧栏菜单 把主要内容区域从一边拖动到另一边，来让左侧或右侧的侧栏菜单进行切换
ionic 侧栏菜单 一个容器元素包含侧边菜单和主要内容.通过把主要内容区域从一边拖动到另一边,来让左侧或右侧的侧栏菜单进行切换. 效果图如下所示: 用法 要使用侧栏菜单,添加一个父元素<ion ...
- C# WPF 左侧菜单右侧内容布局效果实现
原文:C# WPF 左侧菜单右侧内容布局效果实现 我们要做的效果是这样的,左侧是可折叠的菜单栏,右侧是内容区域,点击左侧的菜单项右侧内容区域则相应地切换. wpf实现的话,我的办法是用一个tabcon ...
- BootStrap实现左侧或右侧竖式tab选项卡
BootStrap实现左侧或右侧竖式tab选项卡 代码如下: <div style="height: 100px;"> <div class="col- ...
- python 添加tab补全
在平时查看Python方法用到tab补全还是很方便的. 1. mac 平台 配置如下: mac是类Unix平台,需要在添加一条配置内容到bash_profile 中(默认是没有这个文件,可以新建一个放 ...
- bootstrap动态添加Tab标签页
好久没有写博客了(主要是懒),工作中用到一个动态添加Tab的功能,众所周知,bootstrap没有动态添加Tab的功能,网上又没找到什么好用的,那咱就自己写呗?(因为懒,所以只写了添加的方法.(๑&g ...
- 通过编写串口助手工具学习MFC过程——（七）添加Tab Control控件
通过编写串口助手工具学习MFC过程 因为以前也做过几次MFC的编程,每次都是项目完成时,MFC基本操作清楚了,但是过好长时间不再接触MFC的项目,再次做MFC的项目时,又要从头开始熟悉.这次通过做一个 ...
- python添加tab键提示
新建一个tab.py脚本 #!/usr/bin/python import sys import readline import rlcompleter import atexit import os ...
- 解决easyui-tab添加tab滚动条问题
//添加tab var addTab = function (title, url, icon) { if (!$('#mainTab').tabs('exists', title)) { $('#m ...
- Android两种为ViewPager+Fragment添加Tab的方式
在Android开发中ViewPager的使用是非常广泛的,而它不仅仅能够实现简单的开始引导页,还可以结合Fragment并添加Tab作为选项卡或为显示大批量页面实现强大的顺畅滑动 下面介绍两种为Vi ...
随机推荐
- Arduino-原理图标识
VCC 电源正极 VDD GNG 电源负极 VSS vin 表示输入电源 TXD RXD 是主板串口通信用的接口,TXD表示发送数据,RXD表示接收数据,还有简 ...
- 【python】对于程序员来说，2018刑侦科推理试卷是问题么?
最近网上很火的2018刑侦科推理试卷,题目确实很考验人逻辑思维能力. 可是对于程序员来说,这根本不是问题.写个程序用穷举法计算一遍即可,太简单. import itertools class Solu ...
- SQL Server参数优化
内存参数: 此处为512G物理内存,一般来说设置为物理内存80%左右,设置过大资源不会自动释放,内存可能会持续增长:设置过小资源浪费. CPU参数: 最大工作线程数: 此处为4个CPU40核,调整后物 ...
- 有了二叉查找树、平衡树（AVL）为啥还需要红黑树？
序言 二叉查找树的缺点 平衡二叉树 虽然平衡树解决了二叉查找树退化为近似链表的缺点,能够把查找时间控制在 O(logn),不过却不是最佳的,因为平衡树要求每个节点的左子树和右子树的高度差至多等于1,这 ...
- php实现大视频上传
本人在2010年时使用swfupload为核心进行文件的批量上传的解决方案.见文章:WEB版一次选择多个文件进行批量上传(swfupload)的解决方案. 本人在2013年时使用plupload为核心 ...
- sh_07_买苹果增强版
sh_07_买苹果增强版 # 1. 输入苹果的单价 price_str = input("苹果的单价:") # 2. 输入苹果的重量 weight_str = input(&quo ...
- ecshop 除去版权信息
ECSHOP 2.73彻底去版权的方法 前台部分: 1. 去掉头部TITLE “- Powered by ecshop” 后者打开includes/lib_main.php $page_title = ...
- （12）QT中搭建opencv开发环境
只需要在项目工程文件pro中添加上: INCLUDEPATH += G:/opencv/build/include \ G:/opencv/build/include/opencv \ G:/open ...
- 【转】DataRow复制一行到另一个DataTable
源地址:http://www.cnblogs.com/pains/archive/2007/11/22/969003.html 下面两个方法是DataRow复制一行到另一个DataTable的, ...
- Extending Widgets with the Widget Factory
https://learn.jquery.com/jquery-ui/widget-factory/extending-widgets/ 实例 https://github.com/tkvw/jQue ...