- 加入我的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实现的方法一,在后面,我们还会介绍方法二和方法三。