分类
设计创意
办公创意
游客您好
第三方账号登陆
  • 点击联系客服

    在线时间:8:00-16:00

    客服电话

    0871-64566545

    电子邮件

    admin@admin.com
  • 百澈资源吧APP

    随时掌握最新资源

  • 扫描二维码

    关注星点微信公众号

一个网页同时出现选项卡和滑动门的代码
[复制链接]
2021 - 05 - 19 发布
未知地区 | 未知职业
admin 发表于 2021-5-19 17:59:52 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
简洁TAB效果,一个网页同时出现选项卡和动门的代码,有一些朋友问到了这个题目,现在这段代码可以帮你开拓一下思路。颜色搭配是随便弄的,请自己调整一下。
<head>
<title>简洁TAB</title>
<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>
<style type="text/css">
<!--
*{margin:0;padding:0;list-style:none;font-size:14px}
.nTab{width:500px;margin:20px auto;background:#aaa;border:1px solid #333;overflow:hidden}
.none {display:none;}
.nTab .TabTitle li{float:left;cursor:pointer;height:30px;line-height:30px;font-weight:bold;text-align:center;width:124px}
.nTab .TabTitle li a{text-decoration:none;}
.nTab .TabTitle .active{background:#ccc;color:#336699}
.nTab .TabTitle .normal{background:#666;color:#fff}
.nTab .TabContent{clear:both;overflow:hidden;background:#fff;padding:5px;display:block}
-->
</style>
</head>
<body>
<div class="nTab">
                <div class="TabTitle">
                <ul id="myTab">
                <li class="active" onmouseover="nTabs(this,0);">ASP</li>
                <li class="normal" onmouseover="nTabs(this,1);">PHP</li>                              
                </ul>
                </div>
            <div class="TabContent">
        <div id="myTab_Content0">同一页面,滑动门,选项卡同在</div>
        <div id="myTab_Content1" class="none">兼容性好</div>
        </div>       
</div>

<div class="nTab">
                <div class="TabTitle">
                <ul id="myTab1">
                <li class="active" onclick="nTabs(this,0);">ASP</li>
                <li class="normal" onclick="nTabs(this,1);">PHP</li>                              
                </ul>
                </div>
            <div class="TabContent">
        <div id="myTab1_Content0">简洁TAB,滑动门,选项卡</div>
        <div id="myTab1_Content1" class="none">兼容性好</div>               
            </div>       
</div>
</body>
</html>


帖子地址: 

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

热门下载分类
  • HTML模板
  • 免抠图元素
  • PPT模板
  • 平面设计素材
  • 电商淘宝素材
  • 高清背景图
关注我们
  • 官方微信公众号
  • APP应用下载
客服咨询
  • 0871-64566545(工作日:9:00-16:00)
  • cece56@vip.qq.com

所有资源(除原创外)均是网上搜集或网友上传提供,任何涉及商业盈利目的均不得使用,否则产生的一切后果将由您自己承担。如有侵犯您的版权,请及时发邮件联系我们

册册 by 昆明册册网络科技有限公司 X3.4 © 2019-2020 【问题反馈】 册册网络科技官网 |友链申请|滇ICP备2020008601号 滇公网安备53011202001450 滇ICP备2020008601号