第一种形式: 通过更换显示样式实现，这种很常见，就不多说了。 复制内容到剪贴板代码: 以下是引用片段：
<div id="tabs0">
<ul class="menu0" id="menu0">
<wbr><wbr> <li οnclick="setTab(0,0)" class="hover">新闻</li><br><wbr><wbr> <li οnclick="setTab(0,1)">评论</li><br><wbr><wbr> <li οnclick="setTab(0,2)">技术</li><br><wbr><wbr> <li οnclick="setTab(0,3)">点评</li><br> </ul><br> <div class="main" id="main0"><br><wbr><wbr> <ul class="block"><li>新闻列表</li></ul><br><wbr><wbr> <ul><li>评论列表</li></ul><br><wbr><wbr> <ul><li>技术列表</li></ul><br><wbr><wbr> <ul><li>点评列表</li></ul><br> </div><br> </div> <p>第二种形式: 这种结构比较复杂一些，外面加一个相对层(.menu1box)，设置溢出隐藏，将选项卡(#menu1)设为绝对定位，设置层指针为1(z-index:1;)，以便可以遮住下主区块(.main1box)1px的高度。设置主区块的边框为1px的黑边，上空白(margin-top)为-1px，使上边框伸到选项卡下。当改变选项卡某项(li)的背景为白色时便可遮住一部分主区块的上边框。这样效果就实现了。</p> 代码: 以下是引用片段：<br> <div id="tabs1"><br> <div class="menu1box"><br><wbr><wbr> <ul id="menu1"><br><wbr><wbr><wbr> <li class="hover" οnmοuseοver="setTab(1,0)"><a href="#">新闻</a></li><br><wbr><wbr><wbr> <li οnmοuseοver="setTab(1,1)"><a href="#">评论</a></li><br><wbr><wbr><wbr> <li οnmοuseοver="setTab(1,2)"><a href="#">技术</a></li><br><wbr><wbr><wbr> <li οnmοuseοver="setTab(1,3)"><a href="#">点评</a></li><br><wbr><wbr> </ul><br> </div><br> <div class="main1box"><br><wbr><wbr> <div class="main" id="main1"><br><wbr><wbr><wbr> <ul class="block"><li>新闻列表</li></ul><br><wbr><wbr><wbr> <ul><li>评论列表</li></ul><br><wbr><wbr><wbr> <ul><li>技术列表</li></ul><br><wbr><wbr><wbr> <ul><li>点评列表</li></ul><br><wbr><wbr> </div><br> </div><br> </div> <p>第一、二种形式的JS代码:</p> 代码: 以下是引用片段：<br> function setTab(m,n){<br> var tli=document.getElementByIdx("menu"+m).getElementsByTagName_r("li");*获取选项卡的LI对象*/<br> var mli=document.getElementByIdx("main"+m).getElementsByTagName_r("ul");*获取主显示区域对象*/<br> for(i=0;i<tli.length;i++){<br><wbr><wbr> tli[i].className=i==n?"hover":"";*更改选项卡的LI对象的样式，如果是选定的项则使用.hover样式*/<br><wbr><wbr> mli[i].style.display=i==n?"block":"none";*确定主区域显示哪一个对象*/<br> }<br> } <p>第三种形式: 这也是一种不常用的方式，加一个相对层(.menu2box)，利用一个背景层(#tip2)定位，通过改变层的左距离(left)实现效果。</p> <em>复制内容到剪贴板</em>代码: 以下是引用片段：<br> <div id="tabs2"><br> <div class="menu2box"><br><wbr><wbr> <div id="tip2"></div><br><wbr><wbr> <ul id="menu2"><br><wbr><wbr><wbr> <li class="hover" οnmοuseοver="nowtab(2,0)"><a href="#">新闻</a></li><br><wbr><wbr><wbr> <li οnmοuseοver="nowtab(2,1)"><a href="#">评论</a></li><br><wbr><wbr><wbr> <li οnmοuseοver="nowtab(2,2)"><a href="#">技术</a></li><br><wbr><wbr><wbr> <li οnmοuseοver="nowtab(2,3)"><a href="#">点评</a></li><br><wbr><wbr> </ul><br> </div><br><wbr><wbr> <div class="main" id="main2"><br> 新闻内容<br> </div><br> </div> <p>以下是HTML网页特效代码</p> <p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"><br> <html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>"><br> <head><br> <meta http-equiv="Content-Type" content="text/html;charset=gb2312"><br> <title>简洁Tab</title><br> <style type="text/css"><br> <!--<br> body,div,ul,li{<br> margin:0 auto;<br> padding:0;<br> }<br> body{<br> font:12px "宋体";<br> text-align:center;<br> }<br> a:link{<br> color:#00F;<br> text-decoration:none;<br> }<br> a:visited {<br> color: #00F;<br> text-decoration:none;<br> }<br> a:hover {<br> color: #c00;<br> text-decoration:underline;<br> }<br> ul{<br> list-style:none;<br> }<br> .main{<br> clear:both;<br> padding:8px;<br> text-align:center;<br> }<br><br> #tabs0 {<br> height: 200px;<br> width: 400px;<br> border: 1px solid #cbcbcb;<br> background-color: #f2f6fb;<br> }<br> .menu0{<br> width: 400px;<br> }<br> .menu0 li{<br> display:block;<br> float: left;<br> padding: 4px 0;<br> width:100px;<br> text-align: center;<br> cursor:pointer;<br> background: #FFFFff;<br> }<br> .menu0 li.hover{<br> background: #f2f6fb;<br> }<br> #main0 ul{<br> display: none;<br> }<br> #main0 ul.block{<br> display: block;<br> }<br><br> #tabs1{<br> text-align:left;<br> width:400px;<br> }<br> .menu1box{<br> position:relative;<br> overflow:hidden;<br> height:22px;<br> width:400px;<br> text-align:left;<br> }<br> #menu1{<br> position:absolute;<br> top:0;<br> left:0;<br> z-index:1;<br> }<br> #menu1 li{<br> float:left;<br> display:block;<br> cursor:pointer;<br> width:72px;<br> text-align:center;<br> line-height:21px;<br> height:21px;<br> }<br> #menu1 li.hover{<br> background:#fff;<br> border-left:1px solid #333;<br> border-top:1px solid #333;<br> border-right:1px solid #333;<br> }<br> .main1box{<br> clear:both;<br> margin-top:-1px;<br> border:1px solid #333;<br> height:181px;<br> width:400px;<br> }<br> #main1 ul{<br> display: none;<br> }<br> #main1 ul.block{<br> display: block;<br> }<br><br> .menu2box{<br> position:relative;<br> overflow:hidden;<br> height:22px;<br> width:400px;<br> text-align:left;<br> background: #FFFFff;<br> }<br> #tabs2 {<br> height: 200px;<br> width: 400px;<br> border: 1px solid #cbcbcb;<br> background-color: #f2f6fb;<br> }<br> #tip2{<br> position:absolute;<br> top:0;<br> left:0;<br> height:22px;<br> line-height:22px;<br> z-index:0;<br> width:100px;<br> background: #f2f6fb;<br> }<br> #menu2{<br> position:absolute;<br> top:0;<br> left:0;<br> z-index:1;<br> }<br> #menu2 li{<br> display:block;<br> float: left;<br> padding: 4px 0;<br> width:100px;<br> text-align: center;<br> cursor:pointer;<br> }<br> --><br> </style><br> <script><br> <!--<br><br> function setTab(m,n){<br> var tli=document.getElementByIdx("menu"+m).getElementsByTagName_r("li");<br> var mli=document.getElementByIdx("main"+m).getElementsByTagName_r("ul");<br> for(i=0;i<tli.length;i++){<br> tli[i].className=i==n?"hover":"";<br> mli[i].style.display=i==n?"block":"none";<br> }<br> }<br><br> var m3={0:"",1:"评论内容",2:"技术内容",3:"点评内容"}<br> function nowtab(m,n){<br> if(n!=0 && m3[0]=="")m3[0]=document.getElementByIdx("main2").innerHTML;<br> document.getElementByIdx("tip"+m).style.left=n*100+'px';<br> document.getElementByIdx("main2").innerHTML=m3[n];<br> }<br> //--><br> </script><br> </head><br> <body><br> <br><br> <br><br> <!--第一种形式--><br> <div id="tabs0"><br> <ul class="menu0" id="menu0"><br> <li οnclick="setTab(0,0)" class="hover">新闻</li><br> <li οnclick="setTab(0,1)">评论</li><br> <li οnclick="setTab(0,2)">技术</li><br> <li οnclick="setTab(0,3)">点评</li><br> </ul><br> <div class="main" id="main0"><br> <ul class="block"><li>新闻列表</li></ul><br> <ul><li>评论列表</li></ul><br> <ul><li>技术列表</li></ul><br> <ul><li>点评列表</li></ul><br> </div><br> </div><br> <br><br> <br><br> <!--第二种形式--><br> <div id="tabs1"><br> <div class="menu1box"><br> <ul id="menu1"><br><wbr><wbr> <li class="hover" οnmοuseοver="setTab(1,0)"><a href="#">新闻</a></li><br><wbr><wbr> <li οnmοuseοver="setTab(1,1)"><a href="#">评论</a></li><br><wbr><wbr> <li οnmοuseοver="setTab(1,2)"><a href="#">技术</a></li><br><wbr><wbr> <li οnmοuseοver="setTab(1,3)"><a href="#">点评</a></li><br> </ul><br> </div><br> <div class="main1box"><br> <div class="main" id="main1"><br><wbr><wbr> <ul class="block"><li>新闻列表</li></ul><br><wbr><wbr> <ul><li>评论列表</li></ul><br><wbr><wbr> <ul><li>技术列表</li></ul><br><wbr><wbr> <ul><li>点评列表</li></ul><br> </div><br> </div><br> </div><br> <br><br> <br><br> <!--第三种形式--><br> <div id="tabs2"><br> <div class="menu2box"><br> <div id="tip2"></div><br> <ul id="menu2"><br><wbr><wbr> <li class="hover" οnmοuseοver="nowtab(2,0)"><a href="#">新闻</a></li><br><wbr><wbr> <li οnmοuseοver="nowtab(2,1)"><a href="#">评论</a></li><br><wbr><wbr> <li οnmοuseοver="nowtab(2,2)"><a href="#">技术</a></li><br><wbr><wbr> <li οnmοuseοver="nowtab(2,3)"><a href="#">点评</a></li><br> </ul><br> </div><br> <div class="main" id="main2"><br> 新闻内容<br> </div><br> </div><br> <br><br> <br><br> <br><br> <br><br> <br><br> <br><br> <br><br> <br><br> </body><br> </html></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></p> </wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
312
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
