盐城网站建设 -> 信息中心 -> 网络编程 -> 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奥格斯堡
时时彩大小单双稳赚技巧法 新时时彩三星走势图 3d万能6码走势图 赢钱棋牌游戏平台 龙虎137打法 通比牛牛亿元赌博案 怎样分析一分快三走势 斗牛看三张牌抢庄技巧 豪彩vip下载 黑龙江时时彩 新疆时时下载 五洲财富彩票 太子pk10五码全天免费计划 江苏11选5怎么投注能挣钱 棋牌满20元提现 万和娱乐网址