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>