您现在的位置是:网站首页>建站学院帝国CMS

一款好用的css选项卡

2019-07-21来源: 帝国CMS 人已围观

简介 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">tBj企业网站模板免费下载_网站建设_企业网站建设方案
<html xmlns="http://www.w3.org/1999/xhtml">tBj企业网站模板免费下载_网站建设_企业网站建设方案
<head>tBj企业网站模板免费下载_网站建设_企业网站建设方案
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />tBj企业网站模板免费下载_网站建设_企业网站建设方案
<title>选项卡</title>tBj企业网站模板免费下载_网站建设_企业网站建设方案
<script>tBj企业网站模板免费下载_网站建设_企业网站建设方案
<!--tBj企业网站模板免费下载_网站建设_企业网站建设方案
function setTab(name,cursel,n){tBj企业网站模板免费下载_网站建设_企业网站建设方案
for(i=1;i<=n;i++){tBj企业网站模板免费下载_网站建设_企业网站建设方案
var menu=document.getElementById(name+i);/* two1 */tBj企业网站模板免费下载_网站建设_企业网站建设方案
var con=document.getElementById("con_"+name+"_"+i);/* con_two_1 */tBj企业网站模板免费下载_网站建设_企业网站建设方案
menu.className=i==cursel?"hover":"";/*三目运算 等号优先*/tBj企业网站模板免费下载_网站建设_企业网站建设方案
con.style.display=i==cursel?"block":"none";tBj企业网站模板免费下载_网站建设_企业网站建设方案
}tBj企业网站模板免费下载_网站建设_企业网站建设方案
}tBj企业网站模板免费下载_网站建设_企业网站建设方案
//-->tBj企业网站模板免费下载_网站建设_企业网站建设方案
</script>tBj企业网站模板免费下载_网站建设_企业网站建设方案

<style type="text/css">tBj企业网站模板免费下载_网站建设_企业网站建设方案

.city_ser_show{display:none;width:490px;height:200px;border:1px solid #CCCCCC;}tBj企业网站模板免费下载_网站建设_企业网站建设方案
#con_two_1{display:block;}tBj企业网站模板免费下载_网站建设_企业网站建设方案
#menubox{width:500px;height:24px;margin-bottom:7px;}tBj企业网站模板免费下载_网站建设_企业网站建设方案
#menubox ul{margin:0;padding:0;}tBj企业网站模板免费下载_网站建设_企业网站建设方案
#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-overflow:ellipsis;cursor:pointer;width:60px;height:24px;text-align:center;font-size:14px;overflow:visible;}tBj企业网站模板免费下载_网站建设_企业网站建设方案
#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;}tBj企业网站模板免费下载_网站建设_企业网站建设方案

</style>tBj企业网站模板免费下载_网站建设_企业网站建设方案

</head>tBj企业网站模板免费下载_网站建设_企业网站建设方案

<body>tBj企业网站模板免费下载_网站建设_企业网站建设方案
<div id="main">tBj企业网站模板免费下载_网站建设_企业网站建设方案
<div id="menubox">tBj企业网站模板免费下载_网站建设_企业网站建设方案
<!--样式1 滑动选项卡-->tBj企业网站模板免费下载_网站建设_企业网站建设方案
<!--tBj企业网站模板免费下载_网站建设_企业网站建设方案
<ul>tBj企业网站模板免费下载_网站建设_企业网站建设方案
<li id="two1" onmousemove="setTab('two',1,6)" class="hover">选项卡1</li>tBj企业网站模板免费下载_网站建设_企业网站建设方案
<li id="two2" onmousemove="setTab('two',2,6)">选项卡2</li>tBj企业网站模板免费下载_网站建设_企业网站建设方案
<li id="two3" onmousemove="setTab('two',3,6)">选项卡3</li>tBj企业网站模板免费下载_网站建设_企业网站建设方案
<li id="two4" onmousemove="setTab('two',4,6)">选项卡4</li>tBj企业网站模板免费下载_网站建设_企业网站建设方案
<li id="two5" onmousemove="setTab('two',5,6)">选项卡5</li>tBj企业网站模板免费下载_网站建设_企业网站建设方案
<li id="two6" onmousemove="setTab('two',6,6)">选项卡6</li>tBj企业网站模板免费下载_网站建设_企业网站建设方案
</ul>tBj企业网站模板免费下载_网站建设_企业网站建设方案
-->tBj企业网站模板免费下载_网站建设_企业网站建设方案
<!--样式2 --> tBj企业网站模板免费下载_网站建设_企业网站建设方案
<ul>tBj企业网站模板免费下载_网站建设_企业网站建设方案
<li id="two1" onclick="setTab('two',1,9)" class="hover"><a>选项卡1</a></li>tBj企业网站模板免费下载_网站建设_企业网站建设方案
<li id="two2" onclick="setTab('two',2,9)"><a>选项卡2</a></li>tBj企业网站模板免费下载_网站建设_企业网站建设方案
<li id="two3" onclick="setTab('two',3,9)"><a>选项卡3</a></li>tBj企业网站模板免费下载_网站建设_企业网站建设方案
<li id="two4" onclick="setTab('two',4,9)"><a>选项卡4</a></li>tBj企业网站模板免费下载_网站建设_企业网站建设方案
<li id="two5" onclick="setTab('two',5,9)"><a>选项卡5</a></li>tBj企业网站模板免费下载_网站建设_企业网站建设方案
<li id="two6" onclick="setTab('two',6,9)"><a>选项卡6</a></li>tBj企业网站模板免费下载_网站建设_企业网站建设方案
<li id="two7" onclick="setTab('two',7,9)"><a>选项卡7</a></li>tBj企业网站模板免费下载_网站建设_企业网站建设方案
<li id="two8" onclick="setTab('two',8,9)"><a>选项卡8</a></li>tBj企业网站模板免费下载_网站建设_企业网站建设方案
<li id="two9" onclick="setTab('two',9,9)"><a>选项卡9</a></li>tBj企业网站模板免费下载_网站建设_企业网站建设方案

</ul>tBj企业网站模板免费下载_网站建设_企业网站建设方案

</div>tBj企业网站模板免费下载_网站建设_企业网站建设方案
<div id="conten">tBj企业网站模板免费下载_网站建设_企业网站建设方案
<div class="city_ser_show" id="con_two_1">tBj企业网站模板免费下载_网站建设_企业网站建设方案
选项卡1tBj企业网站模板免费下载_网站建设_企业网站建设方案
<p>这个选项卡很NB吧!</p>tBj企业网站模板免费下载_网站建设_企业网站建设方案
</div>tBj企业网站模板免费下载_网站建设_企业网站建设方案
<div class="city_ser_show" id="con_two_2">tBj企业网站模板免费下载_网站建设_企业网站建设方案
选项卡2tBj企业网站模板免费下载_网站建设_企业网站建设方案
<p>是用javascript做的!</p>tBj企业网站模板免费下载_网站建设_企业网站建设方案
</div>tBj企业网站模板免费下载_网站建设_企业网站建设方案
<div class="city_ser_show" id="con_two_3">tBj企业网站模板免费下载_网站建设_企业网站建设方案
选项卡3tBj企业网站模板免费下载_网站建设_企业网站建设方案
<p>很无聊啊!</p>tBj企业网站模板免费下载_网站建设_企业网站建设方案
</div>tBj企业网站模板免费下载_网站建设_企业网站建设方案
<div class="city_ser_show" id="con_two_4">tBj企业网站模板免费下载_网站建设_企业网站建设方案
选项卡4tBj企业网站模板免费下载_网站建设_企业网站建设方案
<p>我很利害吧!</p>tBj企业网站模板免费下载_网站建设_企业网站建设方案
</div>tBj企业网站模板免费下载_网站建设_企业网站建设方案
<div class="city_ser_show" id="con_two_5">tBj企业网站模板免费下载_网站建设_企业网站建设方案
选项卡5tBj企业网站模板免费下载_网站建设_企业网站建设方案
<p>不要问我为什么!</p>tBj企业网站模板免费下载_网站建设_企业网站建设方案
</div>tBj企业网站模板免费下载_网站建设_企业网站建设方案
<div class="city_ser_show" id="con_two_6">tBj企业网站模板免费下载_网站建设_企业网站建设方案
选项卡6tBj企业网站模板免费下载_网站建设_企业网站建设方案
<p>都是为了大家的方便!</p>tBj企业网站模板免费下载_网站建设_企业网站建设方案
</div>tBj企业网站模板免费下载_网站建设_企业网站建设方案
<div class="city_ser_show" id="con_two_7">tBj企业网站模板免费下载_网站建设_企业网站建设方案
选项卡6tBj企业网站模板免费下载_网站建设_企业网站建设方案
<p>都是为了大家的方便!</p>tBj企业网站模板免费下载_网站建设_企业网站建设方案
</div>tBj企业网站模板免费下载_网站建设_企业网站建设方案
<div class="city_ser_show" id="con_two_8">tBj企业网站模板免费下载_网站建设_企业网站建设方案
选项卡6tBj企业网站模板免费下载_网站建设_企业网站建设方案
<p>都是为了大家的方便!</p>tBj企业网站模板免费下载_网站建设_企业网站建设方案
</div>tBj企业网站模板免费下载_网站建设_企业网站建设方案
<div class="city_ser_show" id="con_two_9">tBj企业网站模板免费下载_网站建设_企业网站建设方案
选项卡6tBj企业网站模板免费下载_网站建设_企业网站建设方案
<p>都是为了大家的方便!</p>tBj企业网站模板免费下载_网站建设_企业网站建设方案
</div>tBj企业网站模板免费下载_网站建设_企业网站建设方案
</div>tBj企业网站模板免费下载_网站建设_企业网站建设方案
</div>tBj企业网站模板免费下载_网站建设_企业网站建设方案
</body>tBj企业网站模板免费下载_网站建设_企业网站建设方案
</html>tBj企业网站模板免费下载_网站建设_企业网站建设方案

我自己写的 美工还得你自己来改tBj企业网站模板免费下载_网站建设_企业网站建设方案

很赞哦! ()

猜您喜欢

付费说明

    1、安装cms后台,费用是200,基础费用200包括后台调试以及部分页面模板修改.

    2、请加我个人微信 634626966,或者扫一扫微信二维码。备注“网站”

    3、系统安装只限定于帝国cms,并且支持php,虚拟主机,请选择linux系统

    4、【收费说明】制作企业网站,我是这么收费的!

文章评论

阿里云代金券 100 云产品通用

有效期30天 首购用户

立即领取
阿里云代金券 100 云产品通用

有效期30天 复购+升级

立即领取

站点信息

l