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