网站地图 | RSS订阅 老铁博客 - 上海SEO优化|上海网站建设|蜘蛛池出租|站群代搭建
你的位置:首页 » 前端脚本 » 正文

JS实现切换标签页,显示隐藏DIV层内容

2016-1-13 14:58:27 | 作者:老铁SEO | 1个评论 | 人浏览

<script type="text/javascript">
//制作:凌陈亮www.lingchenliang.com(QQ:57404811)
//切换标签页/选项卡,显示隐藏DIV层内容,同时更换标签链接样式,可用于多个组,每组多个标签
//兼容IE内核/Firefox火狐/Google谷歌等浏览器
//参数:当前标签ID后缀数字,样式class名称组(未触发时样式|触发时样式),标题ID组,内容ID组

function showhide(num,classes,objs1,objs2){
 var sclass=classes.split("|");
 var temp1=objs1.split("|");
 var temp2=objs2.split("|");
 for(var i=0;i<temp1.length;i++){
  var obj1=window.document.getElementById(temp1[i]);
  var obj2=window.document.getElementById(temp2[i]);
  if(Number(num)==Number(i+1)){
   obj1.className=sclass[1];
   obj2.style.display="block";
  }else{
   obj1.className=sclass[0];
   obj2.style.display="none";
  }
 }
}
</script>

<style type="text/css">
.box1 { float: left; width: 600px; border: solid 1px #035e9d; }
.title { margin-bottom: 10px; background: #035e9d; }
.title a.a_t { display: inline-block; margin-right: 10px; padding: 5px 15px; font-size: 20px; font-weight: bold; color: #fff; line-height: 30px; }
.title a.a_t:hover { background: #fff; color: #035e9d; text-decoration: none; }
.title a.a_t_on { display: inline-block; margin-right: 10px; padding: 5px 15px; font-size: 20px; font-weight: bold; line-height: 30px; background: #fff; color: #035e9d; text-decoration: none; }
.content { padding: 10px; line-height: 25px; height: auto!important; min-height: 150px; height: 150px; }</style>

<div class="box1">
    <div class="title">
     <a href="#" id="box1_t1" class="a_t_on" onmouseover="showhide(1,'a_t|a_t_on','box1_t1|box1_t2|box1_t3','box1_c1|box1_c2|box1_c3');">标签一</a>
        <a href="#" id="box1_t2" class="a_t" onmouseover="showhide(2,'a_t|a_t_on','box1_t1|box1_t2|box1_t3','box1_c1|box1_c2|box1_c3');">标签二</a>
        <a href="#" id="box1_t3" class="a_t" onmouseover="showhide(3,'a_t|a_t_on','box1_t1|box1_t2|box1_t3','box1_c1|box1_c2|box1_c3');">标签三</a>
    </div>
    <div id="box1_c1" class="content">
     <ul>
         <li><a href="http://www.lingchenliang.com/post/51.html">JS实现上传前预览图片,兼容IE/FF/谷歌</a></li>
         <li><a href="http://www.lingchenliang.com/post/43.html">JS实现图片等比例缩放,占满DIV,短的显示全,长的超出隐藏</a></li>
         <li><a href="http://www.lingchenliang.com/post/25.html">JS验证用户名必须以字母(不区分大小写)、数字、下划线(_)随意组合的字符</a></li>
         <li><a href="http://www.lingchenliang.com/post/16.html">JS获取字符串长度,1个中文=2个英文</a></li>
        </ul>
    </div>
    <div id="box1_c2" class="content" style=" display: none; ">
     <ul>
         <li><a href="http://www.lingchenliang.com/post/4.html">ASP过滤HTML标签、JS代码、CSS样式,只获取纯文本</a></li>
         <li><a href="http://www.lingchenliang.com/post/12.html">ASP判断字符串是否小于/大于/不等于指定长度,1个中文=2个英文</a></li>
         <li><a href="http://www.lingchenliang.com/post/35.html">asp取左边字符串函数(1个中文=2个英文)</a></li>
         <li><a href="http://www.lingchenliang.com/post/39.html">ASP生成数字字母图片验证码,可设置位数</a></li>
        </ul>
    </div>
    <div id="box1_c3" class="content" style=" display: none; ">凌陈亮博客专注网站优化、网站制作,在上海从事多年SEO整站优化和网站建设工作经验,提供搜索引擎优化(百度baidu/360好搜haosou/搜搜soso/搜狗sogou/谷歌google关键词排名)、ASP网站开发、网页前端和后端、JS代码、正则表达式等技术文章,欢迎免费使用和转载。</div>
</div>


点击此处在线预览效果

  • 本文来自: 老铁博客,转载请保留出处!欢迎发表您的评论
  • 相关标签:Javascript  JS控制DIV  切换标签页  显示隐藏DIV  JS选项卡  JS特效  
  • 已有1位网友发表了一针见血的评论,你还等什么?

    必填

    选填

    记住我,下次回复时不用重新输入个人信息

    必填,不填不让过哦,嘻嘻。

    ◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。