左侧点击后右侧添加tab标签栏以及内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>左侧点击后右侧添加tab标签栏以及内容</title>
<script type="text/javascript" src="filesblogs/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 }
jquery免费特效下载24 #tabs li.current {
25 background-color:#e1e1e1;
26 }
27 #tabs li.current a {
28 color:#000;
29 text-decoration:none;
30 }
31 #tabs ve {
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;
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
8var 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 $('#ve').live('click', function() {
20// Get the tab name
21var tabid = $(this).parent().find(".tab").attr("id");
22
23// remove tab and related content
24var 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 29if ($("#tabs li.current").length == 0 && $("#tabs li").length > 0) {
30
31// find the first tab
32var firsttab = $("#tabs li:first-child");
33 firsttab.addClass("current");
34
35// get its link name and show related content
36var firsttabid = $(firsttab).find("a.tab").attr("id");
37 $("#" + firsttabid + "_content").show();
38 }
39 });
40 });
41function addTab(link) {
42// If tab already exist in the list, return
43if ($("#" + $(link).attr("rel")).length != 0)
44return;
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>
效果图：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论