仓酷云

标题: 来一发三种简便的Tab导航(网页选项卡) [打印本页]
作者: 第二个灵魂    时间: 2015-1-16 00:16
标题: 来一发三种简便的Tab导航(网页选项卡)
可以增加更多的用户而不需要建立独立的版本。可以一次设计，随处发布。
在网页中使用选项卡可使网页显得更松散，分离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"><!--body,div,ul,li{margin:0auto;padding:0;}body{font:12px"宋体";text-align:center;}a:link{color:#00F;text-decoration:none;}a:visited{color:#00F;text-decoration:none;}a:hover{color:#c00;text-decoration:underline;}ul{list-style:none;}.main{clear:both;padding:8px;text-align:center;}/*第一种情势*/#tabs0{height:200px;width:400px;border:1pxsolid#cbcbcb;background-color:#f2f6fb;}.menu0{width:400px;}.menu0li{display:block;float:left;padding:4px0;width:100px;text-align:center;cursor:pointer;background:#FFFFff;}.menu0li.hover{background:#f2f6fb;}#main0ul{display:none;}#main0ul.block{display:block;}/*第二种情势*/#tabs1{text-align:left;width:400px;}.menu1box{position:relative;overflow:hidden;height:22px;width:400px;text-align:left;}#menu1{position:absolute;top:0;left:0;z-index:1;}#menu1li{float:left;display:block;cursor:pointer;width:72px;text-align:center;line-height:21px;height:21px;}#menu1li.hover{background:#fff;border-left:1pxsolid#333;border-top:1pxsolid#333;border-right:1pxsolid#333;}.main1box{clear:both;margin-top:-1px;border:1pxsolid#333;height:181px;width:400px;}#main1ul{display:none;}#main1ul.block{display:block;}/*第三种情势*/.menu2box{position:relative;overflow:hidden;height:22px;width:400px;text-align:left;background:#FFFFff;}#tabs2{height:200px;width:400px;border:1pxsolid#cbcbcb;background-color:#f2f6fb;}#tip2{position:absolute;top:0;left:0;height:22px;line-height:22px;z-index:0;width:100px;background:#f2f6fb;}#menu2{position:absolute;top:0;left:0;z-index:1;}#menu2li{display:block;float:left;padding:4px0;width:100px;text-align:center;cursor:pointer;}--></style><script><!--/*第一种情势第二种情势改换显现款式*/functionsetTab(m,n){vartli=document.getElementById("menu"+m).getElementsByTagName("li");varmli=document.getElementById("main"+m).getElementsByTagName("ul");for(i=0;i<tli.length;i++){tli.className=i==n?"hover":"";mli.style.display=i==n?"block":"none";}}/*第三种情势使用一个背景层定位*/varm3={0:"",1:"批评内容",2:"手艺内容",3:"点评内容"}functionnowtab(m,n){if(n!=0&&m3[0]=="")m3[0]=document.getElementById("main2").innerHTML;document.getElementById("tip"+m).style.left=n*100+px;document.getElementById("main2").innerHTML=m3[n];}//--></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
Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。
作者: 蒙在股里    时间: 2015-1-24 15:22
还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。
作者: 爱飞    时间: 2015-2-1 22:24
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。
作者: 小魔女    时间: 2015-2-7 17:42
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环
作者: 透明    时间: 2015-2-22 22:07
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。
作者: 老尸    时间: 2015-3-7 05:06
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。
作者: 不帅    时间: 2015-3-14 13:36
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。
作者: admin    时间: 2015-3-21 09:56
直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。



欢迎光临 仓酷云 (http://ckuyun.com/) Powered by Discuz! X3.2