仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 1778|回复: 12
打印 上一主题 下一主题

[HTML5] 来看看:一种简便的选项卡效果代码

[复制链接]
分手快乐 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 22:30:44 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
通过大家的心得,或许能找出"怎么学html5"这个问题的答案。另,我会不定期把群里面关于技术的讨论贴到本帖,敬请关注。  选项卡原身是Windows操纵体系的一个创意,即经由过程互换选项,让良多项目信息轮番显现在巨细和地位都流动的小块地区里。因而选项卡具有占用篇幅小,辐射内容年夜的特性。一个典范的例子是你翻开IE扫瞄器,顺次点击“工具”-“Internet选项”,这个表单就是一个选项卡典范结构。固然了,这里所说的选项卡效果是要在Web页面完成的,并不是使用程序里的菜单选项,在网页中使用选项卡可使网页显得更松散,分离AJAX手艺可使页面在无限的空间内展示更多的内容。本文次要先容一种简便的选项卡效果的完成,兼容性较好,便利人人间接利用。

<styletype="text/CSS">body{margin:0px;text-align:center;font-size:12px;}#divall{margin:auto;margin-top:35px;width:300px;height:200px;background-color:#7DA7D9;border:0px;}#title{width:300px;height:20px;font-size:14px;margin-top:4px;}#table1table{width:300px;height:30px;font-size:12px;}#table2table{width:300px;height:30px;font-size:12px;}#content1,#content2,#content3,#content4,#content5,#content6,#msg1,#msg2{margin:auto;height:110px;width:290px;background-color:#eee;position:relative;}#content1div,#content2div,#content3div,#content4div,#content5div,#content6div{position:absolute;bottom:3px;right:3px;cursor:pointer;}a{text-decoration:none;}.changebordercolor{border-top:1pxsolid#369;border-left:1pxsolid#369;}.backbordercolor{border:0pxsolidred;}</style><scriptlanguage="javascript">functionmsg(){document.getElementById("msg1").style.display="none"document.getElementById("msg2").style.display="none"}functionmsgnone(ms,cont){document.getElementById(ms).style.display=blockdocument.getElementById(cont).style.display=none}functionaa1(){document.getElementById("content1").style.display="block"document.getElementById("content2").style.display="none"document.getElementById("content3").style.display="none"document.getElementById("content4").style.display="none"document.getElementById("content5").style.display="none"document.getElementById("content6").style.display="none"}functionaa2(){document.getElementById("content1").style.display="none"document.getElementById("content2").style.display="block"document.getElementById("content3").style.display="none"document.getElementById("content4").style.display="none"document.getElementById("content5").style.display="none"document.getElementById("content6").style.display="none"}functionaa3(){document.getElementById("content1").style.display="none"document.getElementById("content2").style.display="none"document.getElementById("content3").style.display="block"document.getElementById("content4").style.display="none"document.getElementById("content5").style.display="none"document.getElementById("content6").style.display="none"}functionaa4(){document.getElementById("content1").style.display="none"document.getElementById("content2").style.display="none"document.getElementById("content3").style.display="none"do
123下一页


Resig在2008年在其博客中介绍过HTML5的data-属性,现如今HTML5在如火如荼地推广,似乎国内的技术有些延迟,这篇博文可以在这里找到。
分手快乐 该用户已被删除
沙发
 楼主| 发表于 2015-1-15 23:44:14 | 只看该作者

来看看:一种简便的选项卡效果代码

HTML5草案的前身名为WebApplications1.0,于2004年被WHATWG提出,于2007年被W3C接纳,并成立了新的HTML工作团队。<divclass="start">cument.getElementById("content4").style.display="block"document.getElementById("content5").style.display="none"document.getElementById("content6").style.display="none"}functionaa5(){document.getElementById("content1").style.display="none"document.getElementById("content2").style.display="none"document.getElementById("content3").style.display="none"document.getElementById("content4").style.display="none"document.getElementById("content5").style.display="block"document.getElementById("content6").style.display="none"}functionaa6(){document.getElementById("content1").style.display="none"document.getElementById("content2").style.display="none"document.getElementById("content3").style.display="none"document.getElementById("content4").style.display="none"document.getElementById("content5").style.display="none"document.getElementById("content6").style.display="block"}</script><body><divid="divall"><divid="title">分类范例</div><divid="table1"><tablecellpadding=0cellspacing=0boder=0><tralign=center><td><ahref="http://www.sj33.cn">计划之家</a></td><td><ahref="http://www.sj33.cn">计划之家</a></td><td><ahref="http://www.sj33.cn">计划之家</a></td></tr></table></div><divid="content1">第一个内里的内容<div>封闭</div></div><divid="content2">第二个内里的内容<div>封闭</div></div><divid="content3">第三个内里的内容<div>封闭</div></div><divid="msg1">没有选择范例</div><divid="table2"><tablecellpadding=0cellspacing=0boder=0><tralign=center><td><ahref="http://www.sj33.cn">计划之家</a></td><td><ahref="http://www.sj33.cn">计划之家</a></td><tdDivH20">历经多年来的停滞不前,如今全球信息网联盟(WorldWideWebConsortium,W3C)重拾HTML标准化。
分手快乐 该用户已被删除
板凳
 楼主| 发表于 2015-1-15 23:50:36 | 只看该作者

来看看:一种简便的选项卡效果代码

有些差异相对轻微,有充分的理由将这两种HTML5规范草案合并为一,让浏览器制造商与网络开发者不必面对不兼容的窘境。<divclass="start">rdercolor"><ahref="http://www.sj33.cn">计划之家</a></td></tr></table></div><divid="content4">第四个内里的内容<div>封闭</div></div><divid="content5">第五个内里的内容<div>封闭</div></div><divid="content6">第六个内里的内容<div>封闭</div></div><divid="msg2">没有选择范例</div></div></body></P>
<P>[Ctrl+A全体选择提醒:你可先修正部分代码,再按运转]
精灵巫婆 该用户已被删除
地板
发表于 2015-1-17 23:58:59 来自手机 | 只看该作者
HTML技术的不断发展和完善,随之而产生了众多网页编辑器,从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器(则原始代码编辑器)
admin 该用户已被删除
5#
发表于 2015-1-27 05:05:09 | 只看该作者
Dreamweaver在所见即所得添加链接时,可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。
冷月葬花魂 该用户已被删除
6#
发表于 2015-2-5 09:11:24 | 只看该作者
Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。
活着的死人 该用户已被删除
7#
发表于 2015-2-11 08:42:07 | 只看该作者
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。
莫相离 该用户已被删除
8#
发表于 2015-3-2 08:08:10 | 只看该作者
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。
小妖女 该用户已被删除
9#
发表于 2015-3-11 05:30:28 | 只看该作者
不管老师做怎样的解释,而我却对它感到很是吃力,诸如里面有许多不知道的功能。
不帅 该用户已被删除
10#
发表于 2015-3-17 23:10:28 | 只看该作者
经过两天的学习,总算对Dreamweaver有进一步的了解了,心中不免有些激动。今天和其他几位老师交流了一下,感觉受益匪浅.
变相怪杰 该用户已被删除
11#
发表于 2015-3-25 11:54:13 | 只看该作者
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别,但它同时也存在着致命的弱点。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-22 20:17

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表