1.jquery标签页：index.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#tabs { margin-top: 1em; }
#tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tab示例</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<div id="wrapper">
<div id="tabs">
<ul>
<li><a href="#orderList">标签页列表</a></li>
</ul>
<div id="orderList">
<ul class="list">
<li><a href="#tab-1">Tab1</a></li>
<li><a href="#tab-2">Tab2</a></li>
<li><a href="#tab-3">Tab3</a></li>
<li><a href="#tab-4">Tab4</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
2.jquery index.js文件
$(function() {
//定义li元素的模板
var tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>";
//标签的总数
var tabCounter = 1;
$( document ).ready( function() {
var tabs = $( "#tabs" ).tabs();
// 动态绑定关闭tab的事件
tabs.delegate( "span.ui-icon-close", "click", function(e) {
var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
$( "#" + panelId ).remove();
tabs.tabs( "refresh" );
//关闭标签页总数减一
tabCounter--;
});
// 点击添加tab页
$( ".list a" ).click( function( e ) {
e.preventDefault();
var href = $( this ).attr( "href" );
var orderid = href.substring( href.indexOf( "-" ) + 1 );
var tabid = "tab-" + orderid;
var url = "tab" + orderid + ".html";
var label = "标签页-" + orderid;
addTab( tabid, url, label );
});
});
// 添加tab的接口
function addTab( id, url, label ) {
var mainTab = $( "#tabs" );
var added = false;
var active_id = 0;
var li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) );
$( "iframe", mainTab ).each( function( i ) {
var src = this.src.substring( this.src.lastIndexOf( "/" ) + 1 );
if ( src == url ) {
added = $( this );
//将已打开的标签页设为活跃状态
mainTab.tabs( { active:i+1});
}
});
//如已存在的标签页时返回
if ( added ) {
return;
}
tabCounter++;
mainTab.find( ".ui-tabs-nav" ).append( li );
var panel = $( "<div/>" ).attr({
"id": id
}).appendTo( mainTab );
//为标签页添加页面内容
$( "<iframe/>" ).attr({
"frameBorder": "0",
"scrolling": "no",
"allowTransparency": "true",
"src": url
}).css({
"width": "100%",
"height": "500px"
}).load( function() {
var iframe = $( this );
iframe.height( iframe.contents().find( "body" ).height(200));
}).appendTo( panel );
mainTab.tabs( "refresh" );
//将新添加的标签页设为活跃状态
mainTab.tabs( { active:tabCounter-1});
}
});
3.以上即为jquery标签页的简单实现，注释已经写得很清楚，如有不懂可下载测试效果。
注：引用jquery的js是用jquery CDN，所以必须在联网情况写测试。或者可自行下载jquery的相关js，修改引用。
相关推荐
jQuery 提供了一些库和插件，可以帮助开发者轻松实现功能丰富的标签页组件。 在 jQuery 标签页中，我们可以使用基本的 HTML 结构来定义各个标签和对应的面板，然后通过 jQuery 代码来实现动态切换和管理。通常，一...
尽管本文主要介绍了使用jQuery实现多标签页切换的方法，但原生JavaScript方案同样可行。原生JavaScript实现多标签页切换主要通过以下步骤： 1. **事件监听**：为标签元素添加点击事件监听。 2. **DOM操作**：通过`...
接下来，我们将通过一个简单的实例来说明如何实现JQuery的标签页效果： 1. **HTML结构**：首先，我们需要构建HTML结构，包括标签页的标题和内容区域。通常，我们会使用`<ul>`和`<li>`来表示标题，`<div>`或`...
css+jquery实现最简单标签页效果html代码，效果很好
开发者通常会在`<head>`标签内引入jQuery库，并在`<body>`标签的`$(document).ready()`函数中编写加载动画的初始化代码，确保在页面内容加载之前显示加载提示。 `更多素材.url`是一个快捷方式或书签，指向更多的...
"jQuery打开多个标签页代码"是一个实用的功能，常用于构建多标签页的后台管理系统，提供用户友好的交互体验。这个功能允许用户在单个浏览器窗口内打开并切换多个页面，就像桌面操作系统中的多任务窗口一样。 首先，...
本资源“jQuery多个标签页面打开代码.zip”聚焦于利用jQuery实现一个功能丰富的多标签页面系统，允许用户在一个应用内同时打开多个页面，类似于浏览器中的标签页功能。这种设计可以提供更好的用户体验，尤其是在需要...
下面是一个简单的示例，展示如何使用jQuery打开一个新标签页： ```javascript $('a[target="_blank"]').click(function(event) { event.preventDefault(); // 阻止默认的链接行为 var url = $(this).attr('href')...
在本文中，我们将深入探讨如何使用jQuery来实现一个功能丰富的输入框，用户可以在其中通过回车键添加标签，同时支持预设标签的选择、显示和删除，并能有效防止标签的重复添加。这个功能常用于博客系统、论坛或者社交...
在本项目中，"jQuery实现多个标签页面打开效果"是一个示例，展示了如何利用JavaScript库jQuery来创建一个类似浏览器多标签页的交互体验。这个压缩包包含了一个使用须知的文本文件（使用须知.txt）以及一个可能为HTML...
"jQuery打开多个标签页代码"这个主题是关于如何利用jQuery实现一个功能，让用户能够在网页中一次性打开多个新标签页。在Web开发中，这种功能常见于链接分享、多页面跳转或者数据对比等场景。 首先，要实现这个功能...
本教程将详细介绍如何使用jQuery来创建一个简单的Tab页选项卡。 首先，我们需要在HTML结构中定义Tab页的基本布局。通常，这包括一个包含多个标签（`<li>`）的无序列表（`<ul>`），每个标签都有一个链接（`<a>`）...
本文将详细解释如何使用jQuery实现一个简单的Tab切换效果，并提供学习和参考的价值。 首先，我们需要理解jQuery的基本语法和概念。jQuery对象通过$符号创建，它可以用于选择DOM元素、操作DOM、绑定事件和执行动画。...
在本文中，我们将深入探讨如何使用jQuery来实现一个简单的tab标签页效果。这个效果涉及到jQuery的基本元素遍历、样式动态操作以及事件处理等技术。首先，我们来看一下HTML结构： ```html <li class="current">...
在"唯美表白动画"项目中，jQuery被用来实现页面元素的动态展示和交互效果。例如，通过`.fadeIn()`和`.fadeOut()`方法可以实现元素的淡入淡出效果，`.animate()`函数则可以自定义复杂的平滑动画，增加视觉吸引力。...
"简单实用的jQuery表单输入框浮动标签动画特效插件"就是这样一个致力于提升表单交互体验的工具。这个插件利用JavaScript库jQuery的力量，为表单输入框提供了创新的浮动标签效果，使得用户在填写信息时能更加清晰、...
【标题】"基于jQuery/JS的简易网页计算器"揭示了这个项目的核心——使用JavaScript和jQuery技术来实现一个基本的在线计算功能。JavaScript是一种在客户端浏览器上运行的脚本语言，常用于网页交互和动态效果的实现，...
本教程将详细讲解如何使用jQuery库和CSS来实现一个简单的Tabs选项卡效果。 首先，让我们理解jQuery的核心概念。jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。...
6. **插件化开发**：jQuery标签页插件通常是模块化的，开发者可以通过简单的配置项自定义样式、动画速度、默认活动标签等。这些插件可能包含初始化函数、公共方法和事件接口，便于与其他代码集成。 7. **响应式设计...