js实现tab选项卡

//css样式
*{margin: 0;padding: 0;
}
li{list-style-type:none;float:left;
}
div.card{overflow:hidden;
}
div.card li{width:110px;height:50px;background:linear-gradient(#e1670e,orange,#e1670e);cursor:pointer;text-align: center;line-height: 50px;
}
div.card li.active{background: linear-gradient(green,lightgreen,green);
}
div.con{width:330px;height:200px;overflow:hidden;
}
div.con li{width:330px;height:200px;display:none;background: linear-gradient(45deg,green,lightgreen);line-height: 50px;text-indent: 2em;
}
div.con li.active{display:block;
}

html部分

<div class="card" id="card"><ul><li class="active">奶茶1</li><li>奶茶2</li><li>奶茶3</li></ul>
</div><div class="con" id="con"><ul><li class="active">中国好奶茶1</li><li>中国好奶茶2</li><li>中国好奶茶3</li></ul>
</div>

JS代码

(function(){try{var card=document.getElementById("card");var cardLi=card.getElementsByTagName("li");var con=document.getElementById("con");var conLi=con.getElementsByTagName("li");for(var i=0;i<cardLi.length;i++){cardLi[i].index=i;cardLi[i].onclick=function(){console.log(this.index);for(var i=0;i<cardLi.length;i++){cardLi[i].className="";conLi[i].className="";}this.className="active";       conLi[this.index].className="active";}}}catch(err){return false}})();

js实现tab选项卡相关推荐

qt tablewidget 实现tab来回切换_原生JS实现TAB选项卡切换效果
插件化写法: HTML: tab1 tab2 tab3 tab4 tab5 页面1 页面2 页面3 页面4 页面5 css: .wrap{height:500px;width:80%;margin:5 ...
基于jQuery实现tab选项卡【js实现页签切换】
任务描述本关任务:用jquery实现一个tab切换的功能. 效果图如下: 相关知识为了完成本关任务,你需要掌握:1.层次选择器,2.方法show和hide, 3.操作css类的方法. 层次选择器 ...
原生态js实现充话费功能（模态框 + tab选项卡）
之前分开写了模态框和选项卡的功能,今天把模态框和tab选项卡综合起来实现了充话费的功能,其实原理很简单,就是点击tab标题时,让它所对应的内容显示出来,可以用display:none,基本代码如下: ...
动感效果的TAB选项卡 jquery 插件
动感效果的TAB选项卡 jquery 插件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
js进阶 11-22/23 js如何实现选项卡
js进阶 11-22/23 js如何实现选项卡一.总结一句话总结:通过索引把选项卡头的li标签和选项卡内容的div标签联系在一起,通过控制div标签的display属性可以实现选项卡的选项切换. ...
用fieldset标签轻松实现Tab选项卡效果
fieldset是一个不常用的HTML标签,它可以将表单内的元素分组显示,legend标签为 fieldset 元素定义标题.由于各浏览器在显示fieldset和legend结构时会自动为其添加边框和 ...
MUI tab选项卡之间的切换和数据获取
查看mui官网上面的例子,会看到有多种tab 选项卡的例子,我就写下我用到的tab选项卡.写了个简单的例子,效果如下图主页面的代码 <nav class="mui-bar mui-b ...
jQuery封装tab选项卡组件(自定义自动功能和延迟显示功能）
效果图 tab.html <!DOCTYPE html> <html lang="zh-CN"> <head ...
Tab选项卡切换效果JavaScript汇总
tab切换在现在的网页上,真是十分的常用呀.但是tab切换的JavaScript实现却有很多需要注意的地方,如何用最少的代码,最灵活的实现.这里收集了37个tab实现的JavaScript代码,在此备 ...

js实现tab选项卡

js实现tab选项卡相关推荐

最新文章

热门文章