Create Dynamic Tabs with JQuery

最新推荐文章于 2022-10-11 15:59:56 发布

whaosy

最新推荐文章于 2022-10-11 15:59:56 发布

阅读量2.2k

点赞数

分类专栏： Web开发(脚本和动态语言)

Web开发(脚本和动态语言) 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的动态标签页功能，用户可以通过点击链接来添加新的标签页，并且能够关闭不需要的标签。此功能增强了用户体验并展示了jQuery在网页交互方面的强大能力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

http://www.jankoatwarpspeed.com/examples/dynamic_tabs/#

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" >
	<head>
	<title>Dynamic tabs with jQuery - why and how to create them \| JankoAtWarpSpeed Demos</title>
	<style type="text/css">
	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;}
	#documents { margin:0; padding:0;}

	#wrapper { width:700px; margin-top:20px;}

	#header{ background-color:#F6F6F6; width:900px; margin:0px auto; margin-top:20px;
	-moz-border-radius:10px; -webkit-border-radius:10px; padding:30px; position:relative;}
	#header h2 {font-size:16px; font-weight:normal; margin:0px; padding:0px;}

	</style>

	<script type="text/javascript" src="jquery-1.4.min.js" ></script>
	<script type="text/javascript">
	$(document).ready(function() {
	$("#documents 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();
	}
	</script>
	</head>
	<body>
	<div id="header">
	<img src="logo.jpg" alt="JankoAtWarpSpeed demos" /><br />
	<h2>Tutorial: <a href="http://www.jankoatwarpspeed.com/post/2010/01/26/dynamic-tabs-jquery.aspx">Dynamic tabs with jQuery - why and how to create them</a></h2>
	<img src="help.png" alt="Click on lnks to open 'documents' in tabs" style="position:absolute;left:-170px; top:200px;" />
	</div>
	<div id="main">
	<div id="doclist">
	<h2>Documents</h2>
	<ul id="documents">
	<li><a href="#" rel="Document1" title="This is the content of Document1">Document1</a></li>
	<li><a href="#" rel="Document2" title="This is the content of Document2">Document2</a></li>
	<li><a href="#" rel="Document3" title="This is the content of Document3">Document3</a></li>
	<li><a href="#" rel="Document4" title="This is the content of Document4">Document4</a></li>
	<li><a href="#" rel="Document5" title="This is the content of Document5">Document5</a></li>
	</ul>
	</div>
	<div id="wrapper">
	<ul id="tabs">
	<!-- Tabs go here -->
	</ul>
	<div id="content">
	<!-- Tab content goes here -->
	</div>
	</div>
	</div>
	</body>
	</html>