- 关注我的头条号
- 加入我的QQ群
扫描下面的二维码，“关注”我的头条号，我会每天更新免费视频课程。
为了让网页的前端更加丰富，更加多样化，作为站长，我们会添加一些滑动门或选项卡之类的JS效果。那么，怎样通过JS来实现滑动门选项卡功能呢？滑动门功能，我们可能用原始的JS，也可以用Jquery。这里，我们以原始的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实现的方法一，在后面，我们还会介绍方法二和方法三。
