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

相关文章
|
1月前
|
JavaScript 前端开发
js实现点击音频实现播放功能
js实现点击音频实现播放功能
|
4天前
|
JavaScript 定位技术 API
Js地图路线规划以及点击获取经纬度
Js地图路线规划以及点击获取经纬度
|
4天前
|
JavaScript
JS图表生成以及点击修改图表样式
JS图表生成以及点击修改图表样式
|
6天前
|
前端开发 JavaScript
js遍历添加栏目类添加css,再点击其它删除css
该文章介绍了使用JavaScript遍历添加和删除CSS类的方法。示例代码展示了如何在点击时为当前元素添加类,同时移除其他元素的类。其中包含两个示例:一是遍历`.radio-group .ckselect`并处理点击事件,二是实现点击`.zu-top-nav-userinfo`显示/隐藏`.peoples`层,并处理文档点击以关闭层。代码适用于网页交互效果的实现。
9 0
|
12天前
|
Web App开发 监控 JavaScript
JS 鼠标框选(页面选择)时返回对应的 HTML 或文案内容
JS 鼠标框选(页面选择)时返回对应的 HTML 或文案内容 当用户进行鼠标框选选择了页面上的内容时,把选择的内容进行上报。 分为以下几点: 选择文案时 选择图片、svg、iframe、video、audio 等标签时 选择 input、select、textarea 等标签时 选择 input、textarea 标签内容时 选择类似 &nbsp; 字符时 键盘全选时 鼠标右键选择 以上各模块结合时 当包含标签的时候,返回 html 结构,只有文本时返回文本内容
13 1
|
20天前
|
JavaScript 前端开发
JavaScript实现点击鼠标弹钢琴的效果
JavaScript实现点击鼠标弹钢琴的效果
|
20天前
|
JavaScript 前端开发
JavaScript实现鼠标移动特效
JavaScript实现鼠标移动特效
18 0
|
1月前
|
JavaScript 前端开发 流计算
使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理
使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理
|
1月前
|
JavaScript 前端开发
试读版:如何找出 SAP 标准 Fiori 应用某个按钮点击后执行的 JavaScript 源代码
试读版:如何找出 SAP 标准 Fiori 应用某个按钮点击后执行的 JavaScript 源代码
24 0
|
1月前
|
JavaScript
JS实现一键点击按钮复制文本
【5月更文挑战第6天】JS实现一键点击按钮复制文本