html一个页面做多个tab页

2024-11-03

(一)在HTML页面中实现一个简单的Tab

在HTML页面中实现一个简单的Tab 为了充分利用有限的HTML页面空间,经常会采用类似与TabControl的效果通过切换来显示更多的内容.本文将采用一种最为简单的方法来实现类似如Tab页切换的效果. Tab特点每个页签由标题区和内容区组成内容区和标题一一对应至少有两组页签以便可以切换所有页签只有两种状态:选中和未选中,页面载入后默认显示第一个选中页签(当前页签)只有一个并突出高亮显示鼠标点击或移上时切换 HTML页面代码如下: <!DOCTYPE html PUBLIC "

javascript笔记——点击按钮（或超链接）如何跳转到另外一个页面并执行目标页面的js函数

页面跳转同时执行js代码$(function(){});url参数传递标题的前半部分其实不必赘述,按钮也可以换成超链接.. 假设是需要在A页面上的一个按钮,点击后跳转到B页面,传一些参数后且并B页面的某个js函数可以执行~~ 关键在于如何跳转到目标页面之后并「接着」执行「目标页面的js函数」.原因是目标页面的某个js函数原来是需要点击该页面的按钮或超链接才能触发的,但现在需要在跳转到B页面后立即执行! 先不想是从A页面跳转到B页面,假设你想在B页面一打开就执行的话,是需要把代码逻辑写在$(fu

ajax+json+ashx实现一个页面多个tab的分页

1:项目功能需求:我的荣誉.审核中的荣誉.审核通过的荣誉在一个页面分别作列表展示.每个tab都需要分页,对实现的功能做个简单总结. 2:前台页面:引用的DBPage.js和pageCss.css实现分页,tab之间的切换未放在代码里面. script type="text/javascript" src="<%=Epoint.EduFront.Bizlogic.CommFun.GetCommonRecourceDirectory()%>/Scripts/DBPag

FineUI中在一个页面中通过控件事件(JS)向父页面中添加Tab页

1.在前台页面尾部添加js代码 </form> <script type="text/javascript"> var basePath = '<%= ResolveUrl("~/") %>'; function openHelloFineUI() { parent.addExampleTab.apply(null, ['test_tab', basePath

JSP页面中的tab页

首先下载bootstrap-tab.js和bootstrap.min.css <script type="text/javascript">$('#myTab a').click(function (e) { e.preventDefault(); $(this).tab('show'); }); </script> <body> <ul class="nav nav-tabs" style="f

jquery easyui 中tab页添加其他页面，href与content的用法与区别

//tab页增加 function addPanel(name,url){ var dd = $('#tt').tabs('exists',name); if(dd){ $('#tt').tabs('select',name); }else{ var content = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:

JS组件系列——基于Bootstrap Ace模板的菜单Tab页效果优化

前言:之前发表过一篇 JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享(你值得拥有) ,收到很多园友的反馈,当然也包括很多诟病,因为上篇只是将功能实现了,很多细节都没有处理,这篇博主将带领大家一起来优化这里的效果,使之成为一个可以在项目里面使用的成品. 说点题外话,本来,在互联网模式下,Tab页+iframe的组合是不能被大多数平台接受的,从这些年推出的一些好的产品可以看出,几乎大家都不这么玩,即使是一些后台的管理模板,比如常见的AdminLTE.Ace.INSPIN

使用原生js与jQuery分别实现一个简单的tab页签

tab页签通常适用于空间有限而内容较多同时兼顾页面美观度不给用户一种信息过量视觉疲劳的情形.使用面非常广,下面我们用两种方法简单实现之. 首先,构建页面元素.页签的可点击部分我们通常用列表来承载,包括ul和ol,我们这里让页签呈横向分布,所以需要使之向左浮动.而页签内容部分使用div承载即可.另外,我们需要对具有共性的元素统一控制样式和行为,所以就有了下面的dom结构: <div id="main"> <ul id="tabbar" class=&

如何简单的实现一个tab页title的动画效果

首先我们来看看实现的效果 tab上的title沉下去的效果先来看看布局 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="

一个页面通过iframe，获取另一个页面的form

document.getElementsByTagName("iframe")[0].contentWindow.document.forms[0].submit(); var z=dialog.frame.document.forms[0]; 一个页面通过iframe,获取另一个页面的form

【真的是随笔】如何利用htaccess把网站流量引到一个页面上（站点维护页效果）

咕咕咕,好久没来博客园转悠了,最近(这个最近好长啊)一直没时间写博(事实上也不知道写点什么有逼格的东西),所以一直都在潜水,,,(此处省略n字) 好了切入正题,关于如何把网站的所有流量引向一个页面的方法有很多,比如像wordpress可以开维护模式或者装一个插件,ThinkPHP应该可以在前面设置一个路由吧(我没试过,只是估计可以),但对于apache来说有种更方便的方法,就是写.htaccess..但是关于怎么写网上有很多资料,但是我怎么搜到的都是错误的(放上目录直接500或者重定向循环了,我

今天出现了一个问题，Tomcat 进入localhost：8080正常，进入项目内别的页面都是空白页

经仔细检查发现代码没有任何的问题,经仔细检查找到了原因. 问题原因:拦截器(过滤器)把我的访问请求全都拦下了,我在拦截器里把//chain.doFilter(request, response);这行代码注释掉了,所以代码不会继续向下运行,这就导致了浏览器进入项目里任何页面都是空白页. 解决方案:把这行代码注释去掉,让其正常运行. 归根结底还是自己不够细心,望像我这样的编程小白都吸取教训.

JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享（你值得拥有）

前言:最近园子里多了许多谈语言.谈环境.谈逼格(格局)的文章,看看笑笑过后,殊不知其实都是然并卵.提升自己的技术才是王道.之前博主分享过多篇bootstrap组件的文章,引起了很多园友的关注和支持,看样子这种风格还是受到很多园友青睐的.本着不辜负园友们的支持的原则,应群友们的要求,今天来分享下项目中使用Ace模板的菜单样式和基于iframe的Tab页效果. Ace模板地址:http://code.google.com/p/ace-engine/wiki/AceTemplate(有时会打不开) A

chrome浏览器tab页内存占用变大，网站变慢为哪般？

问题概述: 公司做的是BS应用. 之前我们的后台服务器程序是带状态的,用ehcache存储登录状态:这两天被我改成了redis存储,应用本身不再存储登录状态. 然后自测,我在测试某个很耗时间的网页操作的时候,发现第一次请求的时候还比较快(这个请求会开200个iframe出来,每个iframe内部还有2个ajax请求)(期间浏览器会向服务器发送了大概600个请求),耗时1分钟内: 然后第二次请求的时候,发现很多请求一直处于pending状态(chrome的开发者工具可以看),等待很久也出不来页面,

跨浏览器tab页的通信解决方案尝试

目标当前页面需要与当前浏览器已打开的的某个tab页通信,完成某些交互.其中,与当前页面待通信的tab页可以是与当前页面同域(相同的协议.域名和端口),也可以是跨域的. 要实现这个特殊的功能,单单使用HTML5的相关特性是无法完成的,需要有更加巧妙的设计. 畅想现在我们发现下思维,假设多种场景下的解决方案,最终寻找通用解. case 1 两个需要交互的tab页面具有依赖关系. 如 A页面中通过JavaScript的window.open打开B页面,或者B页面通过iframe嵌入至A页面,此种情

Easyui 实现点击不同树节点打开不同tab页展示不同datagrid表数据设计

实现点击不同树节点打开不同tab页展示不同datagrid表数据设计 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 需求描述如上图, 1.点击左侧树,叶子节点,打开不同的tab页,加载与节点对应的表数据 2.在上述打开页面中,进行新增,编辑,复制等操作,确保新增.复制等操作生成的数据只在该页面可见. 涉及思路与关键代码 1.单击左侧树时,叶子节点时,新增.激活一个tab页,打开.激活之前,设置tab页id属性值为树节点的ID,设置title属性为节点

easyui刷新指定tab页里面的数据

主页Home/Index中使用tab管理,在主页中设置一个刷新的方法. /** * 刷新指定的tab里面的数据 * @param title 选项卡标题 * @param refreshTabFunc 自定义的刷新方法(再各个页面具体实现) */ function refreshTabData(title,refreshGridFunc) { if ($("#tabs" ).tabs('exists', title)) { $('#tabs').tabs('select' , titl

切换tab页时，tab页中的echart变形问题

本文为博主原创,未经允许,不得转载: 在两个tab页中,分别展现了两个echart图表,同样的格式与写法,但只有在默认选中的tab页中的图表显示的是正常的, 但进入另一个tab页中时,图表则产生了变形的问题,如下图所示: 在网上查了很多,有各种方法,尝试之后也并没有改变变形的问题, 终极原因是在页面进行加载时,隐藏的图表找不到对应的div大小,所以默认给了一个大小.所以要做的就是在页面加载时, 就对图表进行初始化. 用到的方法如下: <ul id="myTab" class=&q

Bootstrap--模仿官网写一个页面

本文参考Bootstrap官方文档写了简单页面来熟悉Bootstrap的栅格系统.常用CSS样.Javascript插件和部分组件. 以下html代码可以直接复制本地运行: BootstrapPage1:常见的一种页面类型,页面导航,左侧分类.右侧新闻列表 [点击查看效果] <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&

值得分享的Bootstrap Ace模板实现菜单和Tab页效果（转）

Ace模板地址:http://code.google.com/p/ace-engine/wiki/AceTemplate(有时会打不开) Ace英文官网:http://wrapbootstrap.com/preview/WB0B30DGR Ace模板功能介绍地址:http://www.cnblogs.com/txw1958/p/Ace-Responsive-Admin-Template.html 1.菜单效果由于Ace是基于Bootstrap的,所以首先需要引用jquery和bootstrap

JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果

Ace模板地址:http://code.google.com/p/ace-engine/wiki/AceTemplate(有时会打不开) Ace英文官网:http://wrapbootstrap.com/preview/WB0B30DGR Ace模板功能介绍地址:http://www.cnblogs.com/txw1958/p/Ace-Responsive-Admin-Template.html 一.效果展示 1.初始加载出来的效果 2.展开菜单(支持多级展开,后面代码介绍) 3.点击子菜单,以

html一个页面做多个tab页

热门专题