<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>左侧点击后右侧添加tab标签栏以及内容</title>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<style>
body {
font-family: Lucida Sans, Lucida Sans Unicode, Arial, Sans-Serif;
font-size: 13px;
margin: 0px auto;
}
#tabs {
margin: 0;
padding: 0;
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: 0;
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: 0;
list-style: none;
}
#doclist li {
margin: 10px 0;
padding: 0;
}
#container {
margin: 0;
padding: 0;
}
#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">
$(function() {
$("#container a").click(function() {
addTab($(this));
console.log('ccc')
});
$('#tabs ').on('click', 'a.tab', 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').on('click', 'a.remove', 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($("#" + $(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();
}
</script>
