• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > JS应用 > 怎样通过JS简单实现滑动门选项卡功能?

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

    作者: 分类:JS应用 点击: 1,926 次
    wordpress CMS主题:ssmay主题

      为了让网页的前端更加丰富,更加多样化,作为站长,我们会添加一些滑动门或选项卡之类的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实现的方法一,在后面,我们还会介绍方法二和方法三。



      QQ二维码

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

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.