本文介绍了一个使用jQuery实现的简单而灵活的标签页插件。该插件通过简单的HTML结构即可实现标签页效果，并提供了默认激活的第一个标签页示例。
下载地址
http://www.stilbuero.de/jquery/tabs/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Tabs - jQuery plugin for accessible, unobtrusive tabs</title>
<script src="js/jquery-1.1.3.1.pack.js" type="text/javascript"></script>
<script src="js/jquery.history_remote.pack.js" type="text/javascript"></script>
<script src="js/jquery.tabs.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#container-1').tabs();
});
</script>
<link rel="stylesheet" href="css/jquery.tabs.css" type="text/css" media="print, projection, screen">
<!-- Additional IE/Win specific style sheet (Conditional Comments) -->
<!--[if lte IE 7]>
<link rel="stylesheet" href="css/jquery.tabs-ie.css" type="text/css" media="projection, screen">
<![endif]-->
<style type="text/css" media="screen, projection">
/* Not required for Tabs, just to make this demo look better... */
body {
font-size: 16px; /* @ EOMB */
}
* html body {
font-size: 100%; /* @ IE */
}
body * {
font-size: 87.5%;
font-family: "Trebuchet MS", Trebuchet, Verdana, Helvetica, Arial, sans-serif;
}
body * * {
font-size: 100%;
}
h1 {
margin: 1em 0 1.5em;
font-size: 18px;
}
h2 {
margin: 2em 0 1.5em;
font-size: 16px;
}
p {
margin: 0;
}
pre, pre+p, p+p {
margin: 1em 0 0;
}
code {
font-family: "Courier New", Courier, monospace;
}
</style>
</head>
<body>
<h2>Simple Tabs</h2>
<div id="container-1">
<ul>
<li><a href="#fragment-1"><span>One</span></a></li>
<li><a href="#fragment-2"><span>Two</span></a></li>
<li><a href="#fragment-3"><span>Tabs are flexible again</span></a></li>
</ul>
<div id="fragment-1">
<p>First tab is active by default:</p>
</div>
<div id="fragment-2">
Second tab
</div>
<div id="fragment-3">
Thrid tab
</div>
</div>
</body>
</html>
扫一扫
322
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
