html
<div id="Tab1">
<div class="Menubox">
<ul><li class="hover" id="one1" onclick="setTab('one',1,2)">新能源车</li> <li id="one2" onclick="setTab('one',2,2)" class="">买车·动态</li></ul>
</div>
<div class="Contentbox">
<div class="hover" id="con_one_1">选项卡内容一</div>
<div id="con_one_2" style="display: none;">选项卡内容二</div>
</div>
</div>
css
#Tab1{ width: 500px; margin: 1rem auto;}
.Menubox {width:100%; overflow: hidden;}
.Menubox li{ float:left; cursor:pointer; text-align:center; line-height: 30px; color:#333; font-weight:bold; font-size:16px; margin-right: 34px;}
.Menubox li.hover{ color:#c90324; border-bottom: 3px solid #c90324;}
.Contentbox{ padding: 1rem; border: 1px solid #ebebeb;}
script
<script>
function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById("con_"+name+"_"+i);
menu.className=i==cursel?"hover":"";
con.style.display=i==cursel?"block":"none";
}
}
</script>
