纯js实现网页tab选项卡切换效果

1、新建html文档。

3、书写css样式。<style>* { margin: 0; padding: 0; }bo颊俄岿髭dy { font-size: 14px; font-family: "Microsoft YaHei"; }ul, li { list-style: none; }#tab { position: relative; }#tab .tabList ul li { float: left; background: #fefefe; background: -moz-linear-gradient(top, #fefefe, #ededed); background: -o-linear-gradient(left top, left bottom, from(#fefefe), to(#ededed)); background: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#ededed)); border: 1px solid #ccc; padding: 5px 0; width:200px; text-align: center; margin-left: -1px; position: relative; cursor: pointer; }#tab .tabCon { position: absolute; left: -1px; top: 32px; border: 1px solid #ccc; border-top: none; width: 803px; height: 100px; }#tab .tabCon div { padding: 10px; position: absolute; opacity: 0; filter: alpha(opacity=0); }#tab .tabList li.cur { border-bottom: none; background: #fff; }#tab .tabCon div.cur { opacity: 1; filter: alpha(opacity=100); }</style>

5、查看效果。