功能异常强大的Tab切换脚本

2009-02-26 12:30:06 | 【大中小】

本脚本实现了类似于windows窗口界面的Tab标签切换功能，功能之强大，前所未有，可以自由控制添加、删除标准标签和iframe标签，当标签很多时自动生成导向箭头，非常方便实用，不可多得！

下载
点击这里下载脚本源代码

下载源代码包后打开，index.html为演示页面，下载包内包含了所有的源代码和脚本

使用方法：
第一步
在网页<head>区添加以下代码

<script type="text/javascript" src="lib/prototype.js"></script>
<script type="text/javascript" src="src/aptabs.js"></script>
<link rel="stylesheet" type="text/css" href="css/aptabs.css" />

第二步：
在网页<body>区添加以下代码

<div class="apTabs" style="width:500px; height:100px">
    <h2>Tab 1</h2>
    <div>Tab content 1</div>
    <h2>Tab 2</h2>
    <div>Tab content 2</div>
    <h2>Tab 3</h2>
    <div>Tab content 3</div>
</div>

为了网页面内添加Tab标签，主<Div>标签需要加载“apTabs”样式，可以通过修改“apTabs”修改Tab的宽度，每一个标签的标头用<h2>，内容使用普通<Div>

你可以打开aptabs.js 脚本修改相关的参数。

如何阻止Tab被关闭
你可以通过自Tab标头上添加属性 class = "noclose" 来阻止标签的关闭.

<h2 class="noclose">Tab</h2>

使用脚本选择指定标签
你可以建立类似下面的链接

<a onclick="apTabs.show('apTabs', 2)">Installation</a>

如果连接在标签Div内部，可以使用类似下面的链接

<a onclick="apTabs.show(this, 2)">Installation</a>

如何创建一个新的标签

<a onclick="apTabs.add('apTabs', {title: 'Ajax', ajax: 'ajax.php'})">New tab</a>

创建一个普通标签
或者

<a onclick="apTabs.add('apTabs', {title: 'iFrame', iframe: 'iframe.html'})">New tab</a>

创建一个Iframe标签

下载"功能异常强大的Tab切换脚本"

推荐给朋友

上一篇：随机变换的幻灯片效果
下一篇： Ajax调用HTML格式内容轮换显示

功能异常强大的Tab切换脚本

下载"功能异常强大的Tab切换脚本"

相关资源