盐城网站建设 -> 信息中心 -> 网络编程 -> JavaScript

js滑动门,自己用的,亲测很好用,代码最少。

日期:2018-11-23 10:59:21 阅读:292次 【 字体:

css代码

.hidden{display:none}
.index{background:#ca0000;color:#fff; font-size:18px;}

HTML代码

<a href="#" onclick="tabChange(this,'tabcontent')" class='index'>会员</a>
<a href="#" onclick="tabChange(this,'tabcontent')">主站</a>
<a href="#" onclick="tabChange(this,'tabcontent')">资讯</a>
<a href="#" onclick="tabChange(this,'tabcontent')">投稿</a>

JS代码

function tabChange(obj,id)
{
 var arrayli = obj.parentNode.getElementsByTagName("a"); //获取li数组
 var arrayul = document.getElementById(id).getElementsByTagName("ul"); //获取ul数组
 for(i=0;i<arrayul.length;i++)
 {
  if(obj==arrayli[i])
  {
   arrayli[i].className = "index";
   arrayul[i].className = "";
  }
  else
  {
   arrayli[i].className = "";
   arrayul[i].className = "hidden";
  }
 }
}

这是一款点击滑动门,意思是鼠标点击一下就滑动一下,如果需要鼠标滑过就改变,请参考下面的方法。以上是主要代码,样式自己去改变。

将上面HTML代码中的onclick 改成 onmouseover就可以实现鼠标滑动就改变的滑动门了。







上一篇:js 实现统计本文由多少字阅读需要..
下一篇:
最新文章
会员 客服 QQ 电话 充值 工单
Top

24小时客服?#35748;?/h3>

0515-87213010

18036323215

多特vs奥格斯堡
福彩福建时时彩走势图 多乐彩开奖昨天 香港赛马开奖记录 网易票老时时 陕西快乐十分0625017期开奖 福建快3开奖列表 重庆快乐十分彩票网 重庆时时彩官方手机版 广东时时几分钟 白小姐二网站 广东时时十一选五开奖结果走势图 哪里买云南时时 云南十一选五走势图彩经网 人工时时彩在线计划 攒劲甘肃麻将在哪能下 湖南动总共享走势图