简洁tab滑动选项卡菜单网页特效

2013-03-29 15:14:39 css5为大家整理最经典最简单的div css tab选项卡滑动门菜单特效，供大家在线演示与打包下载。

HTML8为大家整理最经典最简单的div css tab选项卡滑动门菜单特效，供大家在线演示与打包下载。

css div选项卡tab滑动菜单特效截图

此滑动门tab选项卡特效非常简洁简单。

使用说明：

1、JS代码修改

function doClick(o){ 
     o.className="nav_current"; 
     var j; 
     var id; 
     var e; 
     for(var i=1;i<=4;i++){ //这里3 需要你修改 你多少条分类 就是多少 
       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

2、css代码解释

.nav li.nav_current a{color:#00F; background:url(a_1.gif) no-repeat 0 0; } 
/* css注释：正在状态或鼠标在此对象上样式 */
.nav li.nav_link a{ color:#333;background:url(a_2.gif) no-repeat 0 0;} 
/* css注释：未激活或未在状态 鼠标未经过时的样式 */

.nav li.nav_current a 这个是代表鼠标在上方或正在对应选项卡时候CSS样式，.nav li.nav_link a 这个是代表没有在状态时候通用CSS样式。

3、html代码解释

<div id="HTML8"> 
    <ul class="nav"> 
        <li class="nav_current" id="nav1" onMouseOver="javascript:doClick(this)">HTML8</li> 
        <li class="nav_link" id="nav2" onMouseOver="javascript:doClick(this)">CSS教程</li> 
        <li class="nav_link" id="nav3" onMouseOver="javascript:doClick(this)">html教程</li> 
        <li class="nav_link" id="nav4" onMouseOver="javascript:doClick(this)">CSS资源</li> 
    </ul> 
    <div class="nav-down"> 
        <div class="dis" id="sub1">欢迎来到HTML8！</div> 
        <div class="undis" id="sub2"><a href="//www.html8.com.cn/css/">CSS基础</a>  
<a href="//www.html8.com.cn/csscss/">CSS入门</a>
        </div> 
        <div class="undis" id="sub3"><a href="//www.html8.com.cn/html/">Html基础</a>  
<a href="//www.html8.com.cn/htmlcss/">html入门</a>
        </div> 
        <div class="undis" id="sub4"><a href="//www.html8.com.cn/css/">CSS入门</a>  
<a href="//www.html8.com.cn/css/">CSS Hack</a> 
<a href="//www.html8.com.cn/css/">CSS模块特效</a>  
<a href="//www.html8.com.cn/css/">CSS工具</a>
        </div> 
    </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"设置

此tab选项卡特效非常经典与非常简单，CSS与JS代码及其少，而HTML结构也非常简单，大家使用时候可根据需求修改样式和图片背景得到自己需要选项卡滑动菜单特效

在线演示：//www.html8.com.cn/yanshi/2013032904/

在线下载：

立即下载（15.940KB）