开发者社区> 主机笔记> 正文

js鼠标点击版tab切换

简介: 代码很简单,主要是布局需要用心研究下,使用时需要把css内注释去除 DOCTYPE html> tab切换 *{margin:0; padding:0;} .tab{width:298px; height:200px; border:1px solid #e5e5e5; ma...
+关注继续查看

代码很简单,主要是布局需要用心研究下,使用时需要把css内注释去除

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tab切换</title>
<style>
*{margin:0; padding:0;}
.tab{width:298px; height:200px; border:1px solid #e5e5e5; margin:50px auto;}
a{text-decoration:none; color:#000;}
.tab-tit{height:27px; background:#f8f8f8; position:relative;}                            //定义高度
.tab-tit ul{ list-style-type:none; position:absolute; left:-1px; width:301px;}                        //绝对定位
.tab-tit ul li{float:left; width:58px; text-align:center; line-height:27px;              
border-bottom:1px solid #e5e5e5; padding:0 1px}                 //和tit一样的高度,但是多了一个下边框   左右有1px的内边距防止active加border后布局混乱
.tab-tit ul .active{border-bottom:#fff; background:#fff; border-left:1px solid #e5e5e5; border-right:1px solid #e5e5e5; padding:0;}  
.tab-content div{display:none;}
</style>
<script>
function getByClass(className,parent){
    var oParent=parent?document.getElementById(parent):document;   // 判断parent参数是否存在,不存在,使用document选区文档所有class
    eles=[];                                                   
    elements=oParent.getElementsByTagName('*');
    for(var i=0,l=elements.length;i<l;i++){
        if(elements[i].className==className){                     
            eles.push(elements[i]);                               //所有符合class存入数组,使用是要使用数组形势如 oDiv[0]
        }
    }
    return eles;
}
window.onload=function(){
    var oTab=getByClass('tab-tit');
    var aTab= oTab[0].getElementsByTagName('li');
    var oTabCon=getByClass('tab-content');
    var aTabCon=oTabCon[0].getElementsByTagName('div');
    console.log(aTabCon);
    for(var i=0,l=aTab.length;i<l;i++){
       aTab[i].index=i;                                      //一组元素控制另一组元素,需要加索引
       aTab[i].onclick=function(){
           for(var i=0,l=aTab.length;i<l;i++){
               aTab[i].className='';
           }
           this.className='active';
           
           for(var i=0,l=aTabCon.length;i<l;i++){
                aTabCon[i].style.display='none';
               
           }
           aTabCon[this.index].style.display='block';
           
       }    
    }
}
</script>
</head>

<body>
<div class="tab">
  <div class="tab-tit">
    <ul>
      <li class="active"><a href="javascript:;">关羽</a></li>
      <li><a href="javascript:;">张飞</a></li>
      <li><a href="javascript:;">赵云</a></li>
      <li><a href="javascript:;">马超</a></li>
      <li><a href="javascript:;">黄忠</a></li>
    </ul>
  </div>
  <div class="tab-content">
       <div style="display:block">关羽的儿子</div>
       <div>张飞的儿子</div>
       <div>赵云的儿子</div>
       <div>马超的儿子</div>
       <div>黄忠的儿子</div>
  </div>
</div>
</body>
</html>

感谢Amy老师的教程http://www.imooc.com/learn/176

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
27727 0
bboss内置数据源apache dbcp与druid数据源切换方法
bboss内置数据源与druid数据源切换方法 bboss内置数据源内置数据源为apache dbcp,也可以配置到阿里巴巴开源的druid数据源,本文介绍他们之间如何切换: 内置数据源dbcp配置 bboss集成了apache dbcp2连接池,并做了jdk1.6兼容性改造,dbcp2官方要求jdk 7+。
896 0
Qt之Tab键切换焦点顺序
简介 Qt的窗口部件按用户的习惯来处理键盘焦点。也就是说,其出发点是用户的焦点能定向到任何一个窗口,或者窗口中任何一个部件。 焦点获取方式比较多,例如:鼠标点击、Tab键切换、快捷键、鼠标滚轮等。 习惯性的,我们经常会使用Tab键来控制焦点顺序,比如:用户注册时,个人信息输入框焦点的切换、执行按钮焦点的切换等。 在添加部件之后,默认情况下,Tab键也是可以切换焦点的,
1308 0
小程序自定义底部导航栏,切换不同页面显示不同tabBar
小程序自定义底部导航栏,切换不同页面显示不同tabBar
1240 0
+关注
主机笔记
主机笔记,各种服务器教程,vps教程,尽在https://www.zhujibiji.com/
83
文章
9
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载