热搜:NVER node 开发 php

CSS+JS实现tab标签切换_html/css_WEB-ITnose

2024-11-15 20:25:01
CSS+JS实现tab标签切换_html/css_WEB-ITnose

实现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:

    TAB切换标签                        法家简介                            墨家简介                            道家简介                                    法家,代表人物韩非、李斯、管仲、商鞅,代表作《韩非子》、《管子》。                            墨家,代表人物墨翟,代表作《墨子》。                            道家,代表人物李耳、庄周,代表作《老子》、《庄子》。            

实现思路:

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


如有疑问,请联系:

QQ:1004740957

Email:niujp08@qq.com