来一发三种简便的Tab导航(网页选项卡)

只看该作者 · 发表于 2015-1-16 00:16:53

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

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

x

可以增加更多的用户而不需要建立独立的版本。可以一次设计，随处发布。
在网页中使用选项卡可使网页显得更松散，分离AJAX手艺可使页面在无限的空间内展示更多的内容。本文次要先容几种简便的选项卡效果的完成（不触及滑动门和AJAX），附有实例，无图片，兼容性较好，便利人人间接利用。
第一种情势:经由过程改换显现款式完成，这类很罕见，就未几说了。
<divid="tabs0">
<ulclass="menu0"id="menu0">
<liclass="hover">旧事</li>
<li>批评</li>
<li>手艺</li>
<li>点评</li>
</ul>
<divclass="main"id="main0">
<ulclass="block"><li>旧事列表</li></ul>
<ul><li>批评列表</li></ul>
<ul><li>手艺列表</li></ul>
<ul><li>点评列表</li></ul>
</div>
</div>
第二种情势:这类布局对照庞大一些，表面加一个绝对层(.menu1box)，设置溢出埋没，将选项卡(#menu1)设为相对定位，设置层指针为1(z-index:1;)，以即可以遮住下主区块(.main1box)1px的高度。设置主区块的边框为1px的黑边，上空缺(margin-top)为-1px，使上边框伸到选项卡下。当改动选项卡某项(li)的背景为红色时即可遮住一部分主区块的上边框。如许效果就完成了。
<divid="tabs1">
<divclass="menu1box">
<ulid="menu1">
<liclass="hover"><ahref="#">旧事</a></li>
<li><ahref="#">批评</a></li>
<li><ahref="#">手艺</a></li>
<li><ahref="#">点评</a></li>
</ul>
</div>
<divclass="main1box">
<divclass="main"id="main1">
<ulclass="block"><li>旧事列表</li></ul>
<ul><li>批评列表</li></ul>
<ul><li>手艺列表</li></ul>
<ul><li>点评列表</li></ul>
</div>
</div>
</div>
第1、二种情势的JS代码:
functionsetTab(m,n){
vartli=document.getElementById("menu"+m).getElementsByTagName("li");/*猎取选项卡的LI工具*/
varmli=document.getElementById("main"+m).getElementsByTagName("ul");/*猎取主显现地区工具*/
for(i=0;i<tli.length;i++){
tli.className=i==n?"hover":"";/*变动选项卡的LI工具的款式，假如是选定的项则利用.hover款式*/
mli.style.display=i==n?"block":"none";/*断定主地区显现哪个工具*/
}
}
第三种情势:这也是一种不经常使用的体例，加一个绝对层(.menu2box)，使用一个背景层(#tip2)定位，经由过程改动层的左间隔(left)完成效果。
<divid="tabs2">
<divclass="menu2box">
<divid="tip2"></div>
<ulid="menu2">
<liclass="hover"><ahref="#">旧事</a></li>
<li><ahref="#">批评</a></li>
<li><ahref="#">手艺</a></li>
<li><ahref="#">点评</a></li>
</ul>
</div>
<divclass="main"id="main2">
旧事内容
</div>
</div>
效果演示：
运转代码框

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>简便Tab</title><styletype="text/CSS"></style><script></script></head><body><br/><br/><divid="tabs0"><ulclass="menu0"id="menu0"><liclass="hover">旧事</li><li>批评</li><li>手艺</li><li>点评</li></ul><divclass="main"id="main0"><ulclass="block"><li>旧事列表</li></ul><ul><li>批评列表</li></ul><ul><li>手艺列表</li></ul><ul><li>点评列表</li></ul></div></div><br/><br/><divid="tabs1"><divclass="menu1box"><ulid="menu1"><liclass="hover"><ahref="#">旧事</a></li><li><ahref="#">批评</a></li><li><ahref="#">手艺</a></li><li><ahref="#">点评</a></li></ul></div><divclass="main1box"><divclass="main"id="main1"><ulclass="block"><li>旧事列表</li></ul><ul><li>批评列表</li></ul><ul><li>手艺列表</li></ul><ul><li>点评列表</li></ul></div></div></div><br/><br/><divid="tabs2"><divclass="menu2box"><divid="tip2"></div><ulid="menu2"><liclass="hover"><ahref="#">旧事</a></li><li><ahref="#">批评</a></li><li><ahref="#">手艺</a></li><li><ahref="#">点评</a></li></ul></div><divclass="main"id="main2">旧事内容</div></div><br/><br/><br/><br/><br/><br/><br/><br/></body></html>

[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]

在Div+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准。那么什么是Div+CSS标准？Div+CSS的标准化设计到底有什么好处？

只看该作者 · 发表于 2015-1-18 05:52:52

Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

只看该作者 · 发表于 2015-1-24 15:22:59

还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。

只看该作者 · 发表于 2015-2-1 22:24:29

使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。

只看该作者 · 发表于 2015-2-7 17:42:15

运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环

只看该作者 · 发表于 2015-2-22 22:07:36

在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

只看该作者 · 发表于 2015-3-7 05:06:16

dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

只看该作者 · 发表于 2015-3-14 13:36:27

您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

只看该作者 · 发表于 2015-3-21 09:56:55

直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 来一发三种简便的Tab导航(网页选项卡)

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

相关帖子