js原生tab切换代码

 

适用于无序的内容，当调用ID无序的内容时，可以使用。

js部分

<script>
window.onload=function(){
  var title=document.getElementById('tab_title');
  var li_title = title.getElementsByTagName('li');
   for(var i = 0; i<li_title.length; i++){
        if(i == 0) li_title[i].className = 'menu_con on';
        else li_title[i].className = 'menu_con';
    }
  var con=document.getElementById('tab_con');
  var li_con = con.getElementsByTagName('li');
   for(var j = 0; j<li_con.length; j++){
        if(j == 0) li_con[j].style.display = 'block';
        else li_con[j].style.display = 'none';
    }
}
function tab_on(id){
  var title=document.getElementById('tab_title');
  var li_title = title.getElementsByTagName('li');
   for(var i = 0; i<li_title.length; i++){
        if(li_title[i].id == id) li_title[i].className = 'menu_con on';
        else li_title[i].className = 'menu_con';
    }
}
function tab(id,n){
  tab_on(id);
  var con=document.getElementById('tab_con');
  var li_con = con.getElementsByTagName('li');
   for(var i = 0; i<li_con.length; i++){
        if(li_con[i].id == 'con_'+n) li_con[i].style.display = 'block';
        else li_con[i].style.display = 'none';
    }
}
</script>

 

html部分

<ul id="tab_title">
    <li class="menu_con" id="title_18" onclick="tab('title_18','18')"><a class="menu_a"><span>电商客服</span></a></li>
    <li class="menu_con" id="title_26" onclick="tab('title_26','26')"><a class="menu_a"><span>测试技术员</span></a></li>
    <li class="menu_con" id="title_28" onclick="tab('title_28','28')"><a class="menu_a"><span>结构工程师</span></a></li>
</ul>
<ul id="tab_con">
    <li style="display:none;" id="con_18"><div class="video_list_right_title">电商客服</div></li>
    <li style="display:none;" id="con_26"><div class="video_list_right_title">测试技术员</div></li>
    <li style="display:none;" id="con_28"><div class="video_list_right_title">结构工程师</div></li>
</ul>