左侧点击后右侧添加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 ...
随机推荐
- 同一个项目的同一DLL多版本的兼容问题
在做REST接口时,想要引入swagger,引入了最新的Swashbuckle.Net45-5.2.1版本,可是这个版本关联两个DLL(System.Web.Http.System.Net.Http. ...
- shiro常见的异常以及处理方法
1.shiro的常见异常 1.1 AuthenticationException 异常是Shiro在登录认证过程中,认证失败需要抛出的异常. AuthenticationException包含以下子 ...
- R语言 eval(quote(x)) 和 eval(x)
eval() 's first argument is an expression. So if you only provide one argument, it will evaluate the ...
- MySQL数据库1初识MySQL
目录 Mysql 一.数据库是什么? 二.为啥使用数据库?(*****) 三.数据库的分类(*****) 1.关系型数据库 2.非关系型数据库 3.关系型与非关系型区别: 四.数据库MySQL的架构 ...
- linux运维、架构之路-linux基础优化
1.查看linux版本 cat /etc/redhat-release #CentOS release 6.9 (Final) ————>查看版本号 uname -m #x86_64 ————& ...
- java上传大文件(局域网环境)
文件上传是最古老的互联网操作之一,20多年来几乎没有怎么变化,还是操作麻烦.缺乏交互.用户体验差. 一.前端代码 英国程序员Remy Sharp总结了这些新的接口 ,本文在他的基础之上,讨论在前端采用 ...
- 记一下今天上下班学的Thread
1 Thread 默认为前台线程,即主程序退出后,线程还可以继续(曾经就掉入这个坑中,使用两线程分别进行UDP收发,结果发线程结束了退出方法,收线程还在继续) 2 Thread 没有可以暂停,可以重新 ...
- C++ 对象间通信框架 V2.0 ××××××× 之（二）
公共头文件:ss_type_def.h ================================================================================ ...
- UVA 1380 A Scheduling Problem
题目链接:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem ...
- PJSIP Socket 模型
前些日子为解决项目中问题调试到PJSIP Socket收发数据部分 ,好记性不如烂笔头,记录下 PJSIP 使用的Socket 模型 ,以备后用. 不同平台下PJSIP采用不同的 Socket模型,W ...