body { margin:0; } ul,li { margin:0; padding:0; list-style:none; } .tab-wrap { width:750px; margin:50px auto; text-align:center; } .tab-list { width:100%; } .tab-list::after { content:''; display:block; clear:both; } .tab-item { float:left; width:150px; height:45px; text-align:center; line-height:45px; box-sizing:border-box; font-size:16px; border-top:1px solid #333; border-bottom:1px solid #333; border-left:1px solid #333; cursor:pointer; } .tab-item.cur { color:#fff; background-color:#333; } .tab-item:last-child { border-right:1px solid #333; } .tab-content { position:relative; } .tab-content .info { display:none; position:absolute; top:0; left:0; width:100%; height:500px; border:1px solid #333; border-top:0; font-size:30px; text-align:center; line-height:500px; box-sizing:border-box; } .tab-content .info.active { display:block; }
更新时间:2020-10-20 00:54:24
保持结构相同,结构中的类名,可以随意更改,以参数传入即可