您正在使用 IPV4 [34.205.246.61] 访问本站,您本次已经查看了 1 页
用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
[公益]保护绿色环境,构建和谐社会       悟空收录网      

【腾讯云】 爆款2核2G3M云服务器首年 61元,叠加红包再享折上折      
[公益] 地球是我家,绿化靠大家      
2024年 清明节 006
2024年 劳动节 033
2025年 元 旦 278
2025年 春 节 306
 
您现在的位置:首页 >> 脚本代码 >> 内容
本类新增
本类热门
非常好的滑动门
内容摘要: STYLE type=text/css.nTab{ float: left; width: auto; margin: 0 auto; border-bottom:1px #AACCEE solid; background:#d5d5d5; background-position:left; background-repeat:repeat-y; margi......
<STYLE type=text/css>

.nTab{

float: left;

width: auto;

margin: 0 auto;

border-bottom:1px #AACCEE solid;

background:#d5d5d5;

background-position:left;

background-repeat:repeat-y;

margin-bottom:0px;

}

.nTab .TabTitle{

clear: both;

height: 20px;

overflow: hidden;

}

.nTab .TabTitle ul{

border:0;

margin:0;

padding:0;

}

.nTab .TabTitle li{

float: left;

width: 80px;

font-size: 12px;

cursor: pointer;

padding-top: 5px;

padding-right: 0px;

padding-left: 0px;

padding-bottom: 0px;

list-style-type: none;

}

.nTab .TabTitle .active{background:#fff;border-left:1px #AACCEE solid;border-top:1px #AACCEE solid;border-right:1px #AACCEE solid;border-bottom:1px #fff solid;}

.nTab .TabTitle .normal{background:#EBF3FB;border:1px #AACCEE solid;}

.nTab .TabContent{

width:auto;border: 1px solid #99CCFF; background-color: #E8EFFF;

margin: 0px auto;

padding:10px 0 0 0;

border-right:1px #AACCEE solid;border-left:1px #AACCEE solid;

}

.none {display:none;}

</STYLE>

<script type="text/javascript">

function nTabs(thisObj,Num){

if(thisObj.className == "active")return;

var tabObj = thisObj.parentNode.id;

var tabList = document.getElementById(tabObj).getElementsByTagName("li");

for(i=0; i <tabList.length; i++)

{

if (i == Num)

{

thisObj.className = "active";

document.getElementById(tabObj+"_Content"+i).style.display = "block";

}else{

tabList[i].className = "normal";

document.getElementById(tabObj+"_Content"+i).style.display = "none";

}

}

}

</script>

<div align="center" style="padding-left:0px;">

<div class="nTab" style=width:253px>

<div class="TabTitle">

<ul id="myTab1">

<li class="active" onmouseover="nTabs(this,0);">壹家怡园</li>

<li class="normal" onmouseover="nTabs(this,1);">永春</li>

<li class="normal" onmouseover="nTabs(this,2);">泉州</li>

</ul>

</div>

<div class="TabContent" style=height=210px>

<div id="myTab1_Content0">壹家怡园内容</div>

<div id="myTab1_Content1" class="none">永春内容</div>

<div id="myTab1_Content2" class="none">泉州内容</div>

</div>

</div>

</div>

多个要将myTab1和myTab1_Content2改掉onmouseover改为onclick则点击触发。

版权声明:本内容来源于网络,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
上一篇:JS实现的超酷文字滚动

 

下一篇:从由下脚自动弹出的一个小POP窗口

发布日期:2021/6/15
手机扫二维码直达本页
发布时间:12:34:56
点  击:10
录  入:壹家怡园
相关文章
Baidu
YiJiaCMS 7.3.8 build231228(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,Cloudflare提供加速防护
运行时间载入中.....