经典简洁css tab选项卡菜单特效

此tab选项卡特效非常简洁简单，查看示例

使用说明：

1、JS代码部分

function doClick(o){ 
 o.className="nav_current"; 
 var j; 
 var id; 
 var e; 
 for(var i=1;i<=4;i++){ //这里4需要你修改 你多少条分类 就是多少 
 id ="nav"+i; 
 j = document.getElementById(id); 
 e = document.getElementById("sub"+i); 
 if(id != o.id){ 
 j.className="nav_link"; 
 e.style.display = "none"; 
 }else{ 
 e.style.display = "block"; 
 } 
 } 
 }

里面有一个“i<=4”,这里数字4，就根据你分类选项卡多少而写为多少，这里是4个分类选项卡，这里就是4，如果是5个分类选项卡，那就修改成数字5

<div id="aiboshuo"> 
 <div><h1>爱博说</h1>经典简洁css tab选项卡菜单特效<a href="https://pdbn.top">https://pdbn.top</a></div>
 <ul class="nav"> 
 <li class="nav_current" id="nav1" onclick="javascript:doClick(this)">入门教程</li> 
 <li class="nav_link" id="nav2" onclick="javascript:doClick(this)">基础教程</li> 
 <li class="nav_link" id="nav3" onclick="javascript:doClick(this)">数据分析教程</li> 
 </ul> 
 <div class="bbb">
 <div class="nav-down"> 
 <div class="dis" id="sub1">
 <h2>第一部分：SEO基础教程</h2>
 <div class="aaa"><a>1.1相关分类文章</a><a>2.1相关分类文章</a><br/><a>3.1相关分类文章</a><a>4.1相关分类文章</a></div>
 <h2>第二部分：</h2>
 <div class="aaa"><a>2.1相关分类文章</a><a>2.2相关分类文章</a><br/><a>2.3相关分类文章</a><a>2.4相关分类文章</a></div>
 <h2>第三部分：</h2>
 <div class="aaa"><a>3.1相关分类文章</a><a>3.2相关分类文章</a><a>3.3相关分类文章</a><br/><a>3.4相关分类文章</a></div>
 </div> 
 </div> 
 <div class="undis" id="sub2">
 获取基础教程相关分类文章
 </div> 
 <div class="undis" id="sub3">
 获取数据分析教程相关分类文章
 </div> 
 </div>

注意观察规律，li里的class与id以及对应选项卡class和id变化规律，根据需求增减。

nav1、nav2、nav3、nav4对应sub1、sub2、sub3、sub4，class="nav_current" 与class="nav_link"多少关系， class="dis"与 class="undis"设置