wordpress CMS主题 微信
Home > JS应用 > 怎样通过JS简单实现滑动门选项卡功能?

怎样通过JS简单实现滑动门选项卡功能?

高时银博客 JS应用 点击: 1,170 次 0 0
  • 标签: |
  • 为了让网页的前端更加丰富,更加多样化,作为站长,我们会添加一些滑动门或选项卡之类的JS效果。那么,怎样通过JS来实现滑动门选项卡功能呢?滑动门功能,我们可能用原始的JS,也可以用Jquery。这里,我们以原始的JS来实现。先贴出效果图。

    怎样通过JS简单实现滑动门选项卡功能?

    如上图:Menu1、Menu2、Menu3 为选项卡标签导航,右侧还有一个“ - ”号,我们要实现的功能是,鼠标移到Menu1、Menu2、Menu3上面是,下面的文字会显示不同的内容。点击右侧的“ - ”号,会隐藏下面的文字内容。

    首页,我们要创建前台的html代码,代码如下:

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    *{ margin:0; padding:0; }
    li{ list-style:none; }
    #cont{ margin:0 auto; border:1px solid #ccc; width:500px; padding:10px; height:400px; }
    #menu{ float:left; width:100%; line-height:30px; border-bottom:1px solid #ccc; }
    #menu li{float:left; width:100px; text-align:center; background:#666; color:#fff; }
    #menu li:hover{ cursor:pointer; }
    #menu li.active{ background:#636; display:block;}
    #span{ float:right; }
    #span:hover{ cursor: pointer; }

    #list { float:left; width:100%; padding:15px 0; display:none; }
    #list li{ float:left; width:100%; }
    #list ul{ display:none;}
    #list ul.active{ display:block;}
    </style>

    <script type="text/javascript">  

    </script>

    </head>
    <body>
    <div id="cont">
    <ul id="menu">
    <li class="active">Menu1</li>
    <li>Menu2</li>
    <li>Menu3</li>
    <span id="span">+</span>
    </ul>
    <div id="list">
    <ul class="active">
    <li>支持注册用户上传自定义头像功能 </li>
    <li>支持注册用户上传自定义头像功能 </li>
    <li>支持注册用户上传自定义头像功能 </li>
    <li>支持注册用户上传自定义头像功能 </li>
    </ul>
    <ul class="acn">
    <li>自定义头像功能 </li>
    <li>自定义头像功能 </li>
    <li>支持注册用户上传自定义头像功能 </li>
    <li>支持注册用户上传自定义头像功能 </li>
    </ul>
    <ul class="acn">
    <li>支持注册用能 </li>
    <li>册用户上传自定义能 </li>
    <li>支持注册用户上传自定义头像功能 </li>
    <li>支持注册用户上传自定义头像功能 </li>
    </ul>
    </div>
    </div>
    </body>
    </html>

    然后,在<script type="text/javascript"> </script>之间添加如下JS代码:

    window.onload = function()
    {
    var $ = function(idd){ return document.getElementById(idd); } //定义一个获取id的方法
    var li = $("menu").getElementsByTagName("li"); //获取id为menu 下的li 标签。
    var spa = $("span"); //获取 span 标签
    var ul = $("list").getElementsByTagName("ul");  //获取 id 为list 下面的 ul 标签
    //右侧 + 号的隐藏
    spa.onclick = function() //点击 span标签
    {
    if(this.innerHTML=="-"){  //如果span标签里的是“—”号
    this.innerHTML = "+"; //点击后就修改成“+”
    $("list").style.display = "none";  //给id 为list的标签添加CSS属性display="none",即隐藏
    } else {
    this.innerHTML = "-"; //否则如查span标签里的是“+”号,就修改成“-”
    $("list").style.display = "block";  //给id 为list的标签添加CSS属性display="block",即显示
    }
    }

    for(var i=0; i<li.length; i++) //循环
    {
    li[i].ind = i; //给li对象自定义属性 ind
    li[i].onmouseover = function() //li对象,鼠标移上去时,
    {
    for(var j=0; j<li.length; j++)//循环修改所有li 的 className = "";
    {
    li[j].className = "";
    ul[j].className = "";
    }
    this.className = "active";//然后为li对象添加类 “active”
    ul[this.ind].className = "active";  //然后为ul对象添加类 “active”,这里的this.ind是li的自定义属性,即等于i
    }
    }

    }

    通过上面的代码,我们就简单实现了滑动门选项卡功能。这里是JS实现的方法一,在后面,我们还会介绍方法二和方法三。


    文章作者:高时银博客
    本文地址:http://wanlimm.com/77201509154834.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    目前还没有评论。赶快来坐沙发吧。

    发表评论