本文目录
- 这段代码如果添加下拉菜单
- js导航条下拉菜单的问题，为什么菜单项无法选中
- 如何用原生js写出滑动下拉菜单
- auto.js怎么开启无障碍服务
- JAVASCRIPT实现鼠标停留，弹出下拉菜单
- 如何用js实现，点击按钮添加一个下拉菜单的功能
这段代码如果添加下拉菜单
琢磨了半天给你搞了个纯CSS版的，兼容IE6、IE7、IE8 | FF2.0、3.0、3.5测试通过
我把图片的透明度改为5【alpha(opacity=5)】方便测试。你自己调回原来的0就可以了
《!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN“ “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“》
《html xmlns=“http://www.w3.org/1999/xhtml“》
《head》
《meta http-equiv=“Content-Type“ content=“text/html; charset=gb2312“ /》
《title》《/title》
《style》
a.ah:hover {display:block;}
a.ah:hover table.tab{
left:auto;
}
li.lih img {display:block;}
li.lih:hover {display:inline!important;}
li.lih:hover table.tab{
left:auto!important;
}
table.tab {
position:absolute;
z-index:99;
left:-1000px;
}
/*
ul li{float:left;}
*/
《/style》
《/head》
《body》
《ul style=“list-style:none;“》
《li class=“lih“ style=“BACKGROUND-IMAGE: url(img/meun/menu02.gif)“》《a class=“ah“ onFocus=this.blur() href=“http://www.163.com“ target=“middle“ onMouseover=“return hidestatus()“》《img src=“https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-zhidao.gif“ width=“90“ height=“53“ alt=“我的产品“ onMouseOver=nereidFade(this,100,10,7) style=“FILTER: alpha(opacity=5)“ onMouseOut=nereidFade(this,01,70,5) border=“0“》
《table class=“tab“ border=“0“》
《tr》
《td》《a href=“#AAA“》AAAAAA《/a》《/td》
《td》《a href=“#BBB“》BBBBBB《/a》《/td》
《td》《a href=“#CCC“》CCCCCC《/a》《/td》
《td》《a href=“#DDD“》DDDDDD《/a》《/td》
《/tr》
《/table》
《/a》《/li》
《!--
《li class=“lih“ style=“BACKGROUND-IMAGE: url(img/meun/menu02.gif)“》《a class=“ah“ onFocus=this.blur() href=“http://www.163.com“ target=“middle“ onMouseover=“return hidestatus()“》《img src=“https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-zhidao.gif“ width=“90“ height=“53“ alt=“我的产品“ onMouseOver=nereidFade(this,100,10,7) style=“FILTER: alpha(opacity=5)“ onMouseOut=nereidFade(this,01,70,5) border=“0“》《br /》
《table class=“tab“ border=“0“》
《tr》
《td》《a href=“#AAA“》AAAAAA《/a》《/td》
《td》《a href=“#BBB“》BBBBBB《/a》《/td》
《td》《a href=“#CCC“》CCCCCC《/a》《/td》
《td》《a href=“#DDD“》DDDDDD《/a》《/td》
《/tr》
《/table》
《/a》《/li》
--》
《/ul》
《/body》
《/html》
js导航条下拉菜单的问题，为什么菜单项无法选中
不算太明白你说的意思，你可以把代码贴出来吗？你可以看一下，我的这个代码，不知道是不是你想要的效果啊。
《!DOCTYPE HTML》
《html》
《head》
《title》Tab切换《/title》
《style》
*{margin:0;padding:0;}
#box{width:450px; margin:20px auto;}
input{width:120px;border:1px solid black;}
.contents{width:450px;height:100px; border:1px solid black; display:none;}
《/style》
《script》
window.onload=function()
{
var box=document.getElementById(’box’); //这里要获取box,是为了下面选择DOM元素时，减少寻找范围，提高速度，也就提高性能了
aBtn=box.getElementsByTagName(’input’),
aCont=box.getElementsByTagName(’div’); //生明多个变量时，尽量用一个var
/*
下面是处理程序，原理是为每个按钮添加一个onclick事件，监听哪个按钮触发了，就触发哪个处理程序
*/
for(var i=0; i《aBtn.length; i++)
{
aBtn[i].index=i;
aBtn[i].onclick=function()
{
//onclick时，先要把三个DIV全隐藏起来
for(var j=0; j《aCont.length; j++)
{
aCont[j].style.display=’none’;
}
//然后再让目标DIV显示出来
aCont[this.index].style.display=’block’;
}
}
}
《/script》
《/head》
《div id=“box“》
《input type=“button“ value=“按钮1“ /》
《input type=“button“ value=“按钮1“ /》
《input type=“button“ value=“按钮1“ /》
《div class=“contents“ style=“display:block;“》内容一《/div》
《div class=“contents“ 》内容二《/div》
《div class=“contents“ 》内容三《/div》
《/div》
《/html》
如何用原生js写出滑动下拉菜单
《!DOCTYPE html》
《html lang=“en“》
《head》
《meta charset=“UTF-8“》
《title》《/title》
《style》
#menu {
position: relative;
background: black;
width: 150px;
height: 30px;
margin: 200px auto;
overflow: hidden;
}
#sc {
position: absolute;
background-color: #80ffff;
width: 150px;
height: 120px;
top: 0;
}
《/style》
《script》
《/script》
《/head》
《body》
《div id=“menu“》
《div id=“sc“》《/div》
《/div》
《script》
var menu = document.getElementById(’menu’);
var sc = document.getElementById(’sc’);
var interval;
function menuscroll() {
var top = parseFloat(sc.style.top) || sc.scrollTop;
top += 10;
sc.style.top = top + “px“;
}
menu.onmouseenter = function() {
interval = setInterval(“menuscroll()“, 90);
}
menu.onmouseleave = function() {
clearInterval(interval);
sc.style.top = 0;
}
《/script》
《/body》
《/html》
auto.js怎么开启无障碍服务
1．首先，进入到手机设置界面，点击打开智能辅助。
2．单击辅助功能进入后，在弹出窗口中，找到无障碍。
3．然后，向下拉，如图所示，找到无障碍快捷方式选项。
4．最后，在弹出窗口中，找到无障碍快捷方式和屏幕锁定时可用，滑动按钮将这两项打开即可。
JAVASCRIPT实现鼠标停留，弹出下拉菜单
你好：
你在网上搜滑动门就可以搜到一大片
下面这个是我经常用的
提示：保存为a.html即可预览效果
《!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN“ “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“》
《html xmlns=“http://www.w3.org/1999/xhtml“》
《head》
《meta http-equiv=“Content-Type“ content=“text/html; charset=gb2312“ /》
《title》▒ 恋婷滑动门技术《/title》
《style media=“screen“ type=“text/css“》
《!--
*{font-size:12px;}
html,body{margin:0;text-align:center;over-flow:hidden;height:100%;width:100%;}
UL{list-style-type:none; margin:0px;}
/* 标准盒模型 */
.ttl{height:18px;}
.ctt{height:auto;padding:6px;clear:both;border:1px solid #064ca1;border-top:0;text-align:left;}
.w936{margin:2px 0;clear:both;width:936px;/*这里调整整个滑动门的宽度*/}
/* TAB 切换效果 */
.tb_{background-image: url(’http://bbs.blueidea.com/attachments/2007/4/29/20070429_b6d924afad052649402dWs8adqAyLtgi.gif’); background-repeat: repeat-x;background-color: #E6F2FF;}
.tb_ ul{height:24px;}
.tb_ li{float:left;height: 24px;line-height:1.9;width: 94px;cursor:pointer;}
/* 用于控制显示与隐藏的css类 */
.normaltab { background-image:url(’http://bbs.blueidea.com/attachments/2007/4/29/20070429_1bd9c293199c87ac974auuJXlsPMeKDq.gif’); background-repeat: no-repeat; color:#1F3A87 ;}
.hovertab { background-image: url(’http://bbs.blueidea.com/attachments/2007/4/29/20070429_55976880c7b020703a18yOxpDn5WBaHd.gif’); background-repeat: no-repeat; color:#1F3A87; font-weight:bold }
.dis{display:block;}
.undis{display:none;}
--》
《/style》
《script type=“text/javascript“ language=“javascript“》
//《!CDATA[
function g(o){return document.getElementById(o);}
function HoverLi(n){
//如果有N个标签,就将i《=N;
//本功能非常OK,兼容IE7,FF,IE6;http://www.xiaogezi.cn/ [小鸽子]系列
for(var i=1;i《=6;i++){g(’tb_’+i).className=’normaltab’;g(’tbc_0’+i).className=’undis’;}g(’tbc_0’+n).className=’dis’;g(’tb_’+n).className=’hovertab’;
}
//如果要做成点击后再转到请将《li》中的onmouseover 改成 onclick;
//]]》
《/script》
《/head》
《body》
《div class=“w936“》
《div id=“tb_“ class=“tb_“》
《ul》
《li id=“tb_1“ class=“hovertab“ onmouseover=“x:HoverLi(1);“》
流行音乐《/li》
《li id=“tb_2“ class=“normaltab“ onmouseover=“i:HoverLi(2);“》
美女写真《/li》
《li id=“tb_3“ class=“normaltab“ onmouseover=“a:HoverLi(3);“》
平面设计《/li》
《li id=“tb_4“ class=“normaltab“ onmouseover=“o:HoverLi(4);“》
网络学堂《/li》
《li id=“tb_5“ class=“normaltab“ onmouseover=“g:HoverLi(5);“》
恋爱宝典《/li》
《li id=“tb_6“ class=“normaltab“ onmouseover=“z:HoverLi(6);“》
Q小鸽子《/li》
《/ul》
《/div》
《div class=“ctt“》
《div class=“dis“ id=“tbc_01“》流行音乐 的内容《/div》
《div class=“undis“ id=“tbc_02“》美女写真 的内容《/div》
《div class=“undis“ id=“tbc_03“》平面设计 的内容《/div》
《div class=“undis“ id=“tbc_04“》网络学堂 的内容《/div》
《div class=“undis“ id=“tbc_05“》恋爱宝典 的内容《/div》
《div class=“undis“ id=“tbc_06“》《b》[Q小鸽子] 的内容《/b》《br /》《img src=“http://vickeychen.go3.icpcn.com/images/logo_main.GIF“ alt=“中国最Q小鸽子“ /》
《/div》
《/div》
《/div》
《hr author=“http://xiaogezi.cn“ size=“1“ noshade=“noshade“ style=“color:#064ca1;margin-top:30px;“ /》
《/body》
《/html》
如何用js实现，点击按钮添加一个下拉菜单的功能
.DivHidden{ width:auto; height:auto; border:1px solid #ffffff; display:none;background-color:#cccccc;position:absolute; color:#ffffff; padding:5px;cursor:move;}
.DivHidden .conright_bottom table tr td{background-color:#4A535A; padding:5px; border-bottom:1px solid #333; border-right:1px solid #333;}
.DivHidden .conright_bottom{width:500px; height:auto}
上面是div样式
下面是div
《div class=“DivHidden box“》
《/div》
