介绍 & lt; p id=癿ain"比;
& lt;才能!——标题——比;
& lt;才能ul id=皌ab"比;
,,& lt; li 类=皊howed"祝辞tab1
,,& lt; li> tab2
,,& lt; li> tab3
& lt;才能/ul>
& lt;才能!——内容——比;
& lt;才能p id=癱ontents"比;
,,& lt; ul 祝辞& lt; !——默认显示第一个——比;
,,,& lt; span>模块一& lt;/span>
,,& lt;/ul>
,,& lt; ul>
,,,& lt; span>模块二& lt;/span>
,,& lt;/ul>
,,& lt; ul>
,,,& lt; span>模块三& lt;/span>
,,& lt;/ul>
& lt;才能/p>
,& lt;/p> 李{
,list-style:没有;
}
,# main {
,,宽度:600 px;
,,保证金:200 px 汽车;
,}
,
,# tab {
,,溢出:隐藏。
,,背景:# 000;
边境才能:1 px solid # 000;
,}
,
,# tab li {
浮:,才能离开;
,,颜色:# fff;
,,身高:30 px;
,,光标:指针;
,,行高:30 px;
,,填充:0,20 px;
,}
,
,# tab li.showed {
,,颜色:# 000;
,,背景:# ddd;
,}
,
,# contents {
边境才能:1 px solid # 000;
,,border-top-width: 0;
,}
,
,# contents ul {
,,行高:150 px;
显示才能:没有;
保证金才能:0,30 px;
,,填充:10 px 0;
以前,} $(()函数,{=,window.onload 函数(),{
var 才能;lis =,美元(& # 39;# tab 李# 39;);
var 才能;uls =,美元(& # 39;# contents ul # 39;);
,
lis.click才能(函数(),{
,,var li_selected =,(这);美元,//选中李的分类
,,var num =, li_selected.index();,//相对于同胞元素的位置
,,lis.removeClass();,//清空地方政府投资公司属性
,,li_selected.addClass(& # 39;显示# 39;);,//选李中添加属性
,,uls.css(& # 39;显示# 39;,,& # 39;没有# 39;);,//隐藏所有ul标签
,,uls.eq (num) . css(& # 39;显示# 39;,,& # 39;块# 39;);,//展示选中的李所对应的ul内容
})才能
,}
});
这篇文章给大家分享的是有关css配合JavaScript实现标签标签切换效果的示例的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
<强>这是html代码
<强> CSS样式
<强>下面是JS了
效果图:
感谢各位的阅读!关于“css配合JavaScript实现标签标签切换效果的示例”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
