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

2016-02-19 09:10 3 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总不能重复吧.

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

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

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

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...

126邮箱怎么申请？

126邮箱怎么申请？ 126邮箱怎么申请?很多朋友工作学习需要用到126邮箱，用惯了QQ邮箱的我们实在是悲催，没有126邮箱不说，也不知道该怎么申请，不过呢有了小编的这篇文章，你1分钟就能轻松搞定了，下面就和百事网小编一起来看看126邮箱注册申请图文教程吧。 1.首先你要进入126网站，网址是www.126.com，之后点击注册，如图： ...

重新定义PowerPoint2019选项卡的名称

标签：电脑入门

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

设置tabcontrol控件选项卡的字体为竖着的

Private tabArea As Rectangle Private tabTextArea As RectangleF Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load Me.TabControl1.DrawMode = TabDrawMode.O...

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...

查看更多精彩>>