刚才学到选项卡 照着网上的视频敲的 嘻嘻

霓虹灯
霓虹灯 发布于 7 天前 浏览:270 类型:原创 - 随笔 分类:HTML/CSS - 学习笔记 二维码: 作者原创 版权保护
<!DOCTYPE html ">
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>选项卡</title>
<script>
<!--
function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);/* two1 */
var con=document.getElementById("con_"+name+"_"+i);/* con_two_1 */
menu.className=i==cursel?"hover":"";/*三目运算  等号优先*/
con.style.display=i==cursel?"block":"none";
}
}
//-->
</script><style type="text/css">.city_ser_show{display:none;width:490px;height:200px;border:1px solid #CCCCCC;}
#con_two_1{display:block;}
#menubox{width:500px;height:24px;margin-bottom:7px;}
#menubox ul{margin:0;padding:0;}
#menubox ul li{float:left;list-style:none;display:inline;padding-top:7px;border:1px solid #D1D1D1;border-bottom:0px;margin:0 10px;white-space:nowrap; text-</p><p>overflow:ellipsis;cursor:pointer;width:60px;height:24px;text-align:center;font-size:14px;overflow:visible;}
#menubox ul li.hover{border-top:2px solid #D1D1D1;border-right:2px solid #D1D1D1;border-left:2px solid #D1D1D1;color: #000000;font-weight:bold;border-bottom:0px solid #D1D1D1;}</style></head><body>
<div id="main">
<div id="menubox">
<!--样式1  滑动选项卡-->
<!--
<ul>
<li id="two1" onmousemove="setTab('two',1,6)" class="hover">选项卡1</li>
<li id="two2" onmousemove="setTab('two',2,6)">选项卡2</li>
<li id="two3" onmousemove="setTab('two',3,6)">选项卡3</li>
<li id="two4" onmousemove="setTab('two',4,6)">选项卡4</li>
<li id="two5" onmousemove="setTab('two',5,6)">选项卡5</li>
<li id="two6" onmousemove="setTab('two',6,6)">选项卡6</li>
</ul>
-->
<!--样式2 --> 
<ul>
<li id="two1" onclick="setTab('two',1,6)" class="hover"><a>选项卡1</a></li>
<li id="two2" onclick="setTab('two',2,6)"><a>选项卡2</a></li>
<li id="two3" onclick="setTab('two',3,6)"><a>选项卡3</a></li>
<li id="two4" onclick="setTab('two',4,6)"><a>选项卡4</a></li>
<li id="two5" onclick="setTab('two',5,6)"><a>选项卡5</a></li>
<li id="two6" onclick="setTab('two',6,6)"><a>选项卡6</a></li>
</ul></div>
<div id="conten">
<div class="city_ser_show" id="con_two_1">
选项卡1
<p>选项卡1的值</p>
</div>
<div class="city_ser_show" id="con_two_2">
选项卡2
<p>选项卡2的值</p>
</div>
<div class="city_ser_show" id="con_two_3">
选项卡3
<p>选项卡3的值</p>
</div>
<div class="city_ser_show" id="con_two_4">
选项卡4
<p>选项卡4的值</p>
</div>
<div class="city_ser_show" id="con_two_5">
选项卡5
<p>选项卡5的值!</p>
</div>
<div class="city_ser_show" id="con_two_6">
学习网页制作这门技术,你可以来这个群460582514
<p>我也在这个群学习,不学习或者不需要接受学习的请勿加</p>
</div></div>
</div>
</body>
</html>
标签:
z
给个赞 0 人点赞
收藏 3 人收藏
评论 已有 5 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
g7738353245
g77383532455 天前5F
我觉得你写的这个有些复杂了。
举报 支持 (0) 回复 (0)
631202703
6312027036 天前4F
用jq简单得多
举报 支持 (0) 回复 (0)
xiongpeiji
xiongpeiji6 天前3F
感觉这选项卡写的有点复杂啊。
举报 支持 (0) 回复 (0)
霓虹灯
霓虹灯7 天前2F
嘻嘻 不知道 你有好点的视频吗? 分享下 //@老姚:这个视频有点坑啊。是不是年头太久了?
举报 支持 (0) 回复 (0)
老姚
老姚7 天前1F
这个视频有点坑啊。是不是年头太久了?
举报 支持 (0) 回复 (1)
霓虹灯 霓虹灯 作者

作者最新