小城盱眙网

标题: Web前端必学技能:经典简洁css tab滑动选项卡菜单特效 [打印本页]

---

作者: ohnoma    时间: 2016-7-7 10:23
标题: Web前端必学技能:经典简洁css tab滑动选项卡菜单特效

Web前端课程必学:经典简洁css tab滑动选项卡菜单特效，下面为大家举个小小的栗子。

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，是可以改的，就根据你分类选项卡多少而写为多少。

css代码

.navli.nav_current a{color:#00F; background:url(a_1.gif) no-repeat 0 0; }

/* css注释：正在状态或鼠标在此对象上样式 */

.nav li.nav_linka{ color:#333;background:url(a_2.gif) no-repeat 0 0;}

/* css注释：未激活或未在状态 鼠标未经过时的样式 */

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

html代码

<div id="divcss5">

   <ul class="nav">

       <li class="nav_current" id="nav1"onMouseOver="javascript:doClick(this)">DIVCSS5</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">欢迎来到DIVCSS5！</div>

       <div class="undis" id="sub2"><a>CSS基础</a>  

<a>CSS入门</a>

       </div>

       <div class="undis" id="sub3"><a>Html基础</a>  

<a >html入门</a>

       </div>

       <div class="undis" id="sub4"><a>CSS入门</a>  

<a>CSS Hack</a>

<a>CSS模块特效</a>  

<a>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结构也非常简单，大家使用时候可根据需求修改样式和图片背景得到自己需要选项卡滑动菜单特效。

如果大家觉得不够详细，请到腾讯课堂或者百度传课搜索海文IT教育，即可观看免费视频。讲解的更透彻。

更多精彩课程，尽在上海海文信息技术有限公司，http://www.oracleoaec.net/。

---

欢迎光临 小城盱眙网 (http://www.xcxy.net/)

Powered by Discuz! X3.2