Css & JavaScript & jquery 实现选项卡的制作

Css 源码

DOCTYPE html>





演示文档

*{margin:0;padding: 0;}
body{padding: 50px}
a{text-decoration:none;}
#list{list-style-type: none}
#list a{
    float: left;
    background: orange;
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: center;
}
#list a:hover{opacity: 0.6}
.clear{clear: both;}
#content div{
    width: 298px;height: 150px;
    border:1px solid green;
}
#content{
    height: 152px;overflow: hidden;
}






    
        菜单1
        菜单2
        菜单3
    





    内容111111111111.......
    内容222222222222.......
    内容333333333333......

源码解析

核心原理，a 标签的锚点效果 + 父 div 限宽 + 多的部分隐藏。

1、如何实现 a 标签的锚点效果？

href 属性找到对应的位置就好，和选择器一样，一般是 id。

菜单1
菜单2
菜单3

内容111111111111.......
内容222222222222.......
内容333333333333......

2、如何实现父 div 限宽 + 多的部分隐藏？

#content{
  height: 152px;overflow: hidden;
}

3、如何实现移上去标签改变透明度？

opacity 属性

#list a:hover{opacity: 0.6}

4、clear:both 一般写在哪个里面？

一般单独写在一个类里面，用的时候直接调用就好了，简单方法

.clear{clear: both;}

JavaScript 源码

DOCTYPE html>



选项卡2

*{margin:0px;padding: 0px }
body{padding: 50px}
#list{
    list-style-type: none;
    height: 30px;
    font-size: 14px
}
#list li{
    width: 80px;
    margin-right: 5px;
    height: 30px; line-height: 30px;
    text-align: center;
    border: solid green 1px;border-bottom: none;
    border-radius: 5px 5px 0 0;
    float: left;
    cursor: pointer;
}
#content div{
    width: 400px;
    height: 150px;
    border:1px solid green;
    display: none;
    background: rgba(100,50,20,0.2);
    }
    #content div.show{display: block;}
    #list li:hover{
            background: rgba(100,50,20,0.4);
    }
.active{background: rgba(100,50,20,0.2);}





    
        第一部分
        第二部分
        第三部分
    
    
        JS进阶......
        JQ精讲......
        JS+JQ+CSS3特效、技巧、案例专题......
    



// var list=document.getElementById('list')
// console.log(list);
// var content=document.getElementById('content')
// var oli=list.getElementsByTagName('li')
// console.log(oli);
// var li_content=content.getElementsByTagName('div')

var oli=document.getElementById('list').getElementsByTagName('li')
// console.log(oli)
var li_content=document.getElementById('content').getElementsByTagName('div')

for(var i=0;i



选项卡3


*{margin: 0px;padding: 0px}
body{padding: 50px}
ul {list-style-type: none;}
#list{
    height: 30px;line-height: 30px;
    margin-bottom: 2px
}
#list li{
    width: 100px;text-align: center;
    border:1px solid green;
    background: rgba(100,50,20,0.2);
    float:left;
    cursor: pointer;
}
#content{
    width: 304px;height: 150px;
    border:1px solid green;border-top: none;
}
#content div{display: none;    }
#content div.show{display: block;}
#list li.active{
    background: #fff;
    border-bottom: none;
}





    
        第一部分
        第二部分
        第三部分
    
    
        JS进阶......
        JQ精讲......
        JS+JQ+CSS3特效、技巧、案例专题......
    



$(function(){
    var $li=$('#list li')
    $li.click(function(){
        $(this).addClass('active').siblings().removeClass('active');
        $('#content div').eq($li.index(this)).show().siblings().hide()
    })
})

jQuery 源码解析

ul>li 做选项卡的选项卡头，多个 div 做选项卡的内容，点到对应的 li，就切换到对应的 div，用 index() 获取 li 索引，与 div 联系。

1、如何获取一个元素所在父亲中同类孩子的索引？

index() 方法

$('#content div').eq($li.index(this)).show().siblings().hide()

2、如何选择除自己之外的所有同级？

没必要用 not() 方法，用 siblings() 就足够了，简单好用。

$(this).addClass('active').siblings().removeClass('active');

3、除 clear:both 之外还有什么好方法可以清楚浮动？

设置 margin-bottom，因为这样就能保证不在同一行（在多行），float 的效果自然影响不到。

#list{
  height: 30px;line-height: 30px;
  margin-bottom: 2px
}