CSS+JS实现tab标签切换

页面导航:首页 > 网络编程 > JavaScript > CSS+JS实现tab标签切换

CSS+JS实现tab标签切换

来源: 作者: 时间:2016-02-04 09:15 【

实现tab标签切换比较简单,下面先看看我实现的效果:我主要实现了:1、tab之间的相互切换;2、显示选中的tab下面看看实现代码:css:html,body,div{ font-size: 12px; font-family:A

实现tab标签切换比较简单,下面先看看我实现的效果:

\

我主要实现了:

1、tab之间的相互切换;

2、显示选中的tab

 

下面看看实现代码:

css

 

html,body,div{
    font-size: 12px;
    font-family:Arial;
}
.tab-ui{
    width: 400px;
    height: 300px;
    position: relative;
}
.tab-title{
    border-top-right-radius:8px;
    float: left;
    border: solid 1px #7EABCD;
    background: #c5dbec;
    padding: 5px;
    font-weight: bold;
    color: #ffffff;
    margin: 1px;
}
.tab-title:hover{
    cursor: pointer;
}
.tab-title-active{
    background: #7EABCD;
}
.content{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 27px;
    left: 1px;
}
.tab-content{

    padding: 10px;
    border: solid 1px #c5dbec;
}

js:

 

 

function show(total,active){
    for(var i=1;i

html:

 

 





<script src=../jquery-1.8.3.js></script><script src=tabtest.js></script>
法家,代表人物韩非、李斯、管仲、商鞅,代表作《韩非子》、《管子》。
墨家,代表人物墨翟,代表作《墨子》。
道家,代表人物李耳、庄周,代表作《老子》、《庄子》。

实现思路:

 

循环将所有的内容标签隐藏,并将tab标题栏的active样式清除,完了之后设置选中标签的内容显示,并给tab标题栏添加active样式。

 

 

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<