可多次使用的仿126邮箱选项卡的源码

2016-02-19 09:10 6 1 收藏

下面图老师小编跟大家分享一个简单易学的可多次使用的仿126邮箱选项卡的源码教程，get新技能是需要行动的，喜欢的朋友赶紧收藏起来学习下吧！

【 tulaoshi.com - Web开发】

选项卡我们这论坛里有不少,但同一个页面可以多次使用的可能没多少,我这个可以在同一个页面里可以有多个选项卡块.用了一个背景图.

背景图片已上传上去了,支持我的帮顶一下,俺昨天花费几个小时啊.
终于适应Ie,ff 浏览器.现在所有代码公开给大家.希望大家喜欢.要用的赶紧拿去用吧.
类似于下面效果.

再加一个div块时只要
div id="Tab2"
div class="Menubox"
ul
li id="two1" onclick="setTab('two',1,4)" 新闻1/li
li id="two2" onclick="setTab('two',2,4)" 新闻2/li
li id="two3" onclick="setTab('two',3,4)"新闻3/li
li id="two4" onclick="setTab('two',4,4)"新闻4/li
/ul
/div
div class="Contentbox"
div id="con_two_1" 新闻列表1/div
div id="con_two_2" style="display:none"新闻列表2/div
div id="con_two_3" style="display:none"新闻列表3/div
div id="con_two_4" style="display:none"新闻列表4/div
/div
/div

看到上面的two没有,把上面的这段复制下,把two改成three,或任何一个不同名的id,就完成了.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >  <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> <title>简洁Tab</title> <style type="text/css">  </style>  </head> <body>新闻1新闻2新闻3   新闻4  新闻列表1新闻列表2新闻列表3新闻列表4新闻1新闻2新闻3   新闻4  新闻列表1新闻列表2新闻列表3新闻列表4 </body> </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
忘记说了tab2也要改,改成tab3吧,同一个页面div,id总不能重复吧.

来源:http://www.tulaoshi.com/n/20160219/1589834.html

上一篇： WPS中鼠标双击的10个妙用
下一篇：解析web.xml中在Servlet中获取context-param和init-param内的参数

看过《可多次使用的仿126邮箱选项卡的源码》的人还看了以下文章更多>>

javascript实现表现、结构、行为分离的选项卡效果！

标签： Web开发

其特点是扩展方便，只要自己添加标题和内容即可，自动初始化。无标题文档 window.onload=resetTab; function getTabTitle(tab) { var childNodesList=tab.childNodes; var titleNodes=new Array(); var j=0; var i; for (i=0;i 选项卡[1] 选项卡[2] 选项卡[3] 选项卡[4] 1经过前述的多个步骤，一个基本的CHM文...

用htc组件制作windows选项卡

标签： Web开发

在网页中模拟制作windows风格选项卡的方法可以有很多种，这里向大家介绍一个比较简单的方法——用htc组件制作。使用htc的好处是可以自由调用，有点批处理的感觉，例如你有很多网页都要用到这个选项卡，那么你只要做一个htc就可以了，然后在不同的网页中分别调用，而不必重复制作。使用起来很方便，可以节约很多时间。 &n...

JQuery 选项卡效果(JS与HTML的分离)

标签： Web开发

在实际应用过程中，只要保证选项卡模块结构代码的完整性，就可以任意添加N个同类选项卡，不需要手动在HTML里绑定事件处理程序以及给要隐藏显示的内容层添加ID。 Javascript（jquery）代码如下：代码如下： script language="javascript" type="text/javascript" $(document).ready(function(){ $("ul.menu li:first-child").addClass("c...

重新定义PowerPoint2024选项卡的名称

标签：电脑入门

①启动PowerPoint2013，鼠标右击选项卡，点击自定义功能区。 ②在右侧主选项卡中右击你要重新定义名称的那一项，选择重命名。 ③弹出一个命名框，输入名称。 ④确定，返回到主界面，可以看到我将开始选项卡改为了Start，大家可以按照此方法完成修改。

CSS Javascript滑动文本选项卡显示

标签： Web开发

CSS+Javascript实现新闻滑动文本选项卡显示，在网页中应用选项卡可以使网页显得更紧凑，结合AJAX技术可以使页面在有限的空间内展现更多的内容：以下是引用片段： !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd" HTMLHEADTITLE绝对经典的滑轮新闻显示(jav...

查看更多精彩>>