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. **响应式设计...