正文
javascript菜单,javascript下拉菜单
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
javascript控制菜单
html
head
titletest/title
style type="text/css"
!--
#wrap{width:300px;height:220px;}
ul {padding:0px;margin:0px}
li{width:100px;height:20px;list-style-type:none;text-
align:center;float:left;}
#m1{width:300px;height:200px;border:1px solid #4c4cff}
#m2{width:300px;height:200px;border:1px solid #4c4cff}
#m3{width:300px;height:200px;border:1px solid #4c4cff}
#chuang{width:200px;height:220px;background-color:#00FF00;}
--
/style
/head
script language="javascript"
var old=null;
function changemenu(mydiv,id){
var obj = document.getElementById(mydiv);
if (old!=nullold!=obj)
old.style.display='none';
old=obj;
if (obj.style.display=='none'){
obj.style.display='block';
}
document.getElementById("i").style.backgroundColor='';
document.getElementById("e").style.backgroundColor='';
document.getElementById("s").style.backgroundColor='';
document.getElementById(id).style.backgroundColor='red';
}
/script
body onload="(changemenu('m1'));"
div id="wrap"
ul
lidiva id="i" onclick="changemenu('m1','i');"信息/a/div /li
lidiva id="e" onclick="changemenu('m2','e');"教育/a/div /li
lidiva id="s" onclick="changemenu('m3','s');"科技/a/div /li
/ul
div id="m1" style="DISPLAY: none"1的信息
/div
div id="m2" style="DISPLAY: none"2的教育
/div
div id="m3" style="DISPLAY: none"3的科技
/div
/div
/body
/html
函数里面多加了一个参数用于接收具体是哪个标题要变色。函数里面增加了4行代码。前3行依次是先把所有的标题背景初始化为没有颜色。最后行代码是把你所点击的代码的背景色变成红色。
你说的新浪的什么的网站的那种属于美工设计。具体方法万变不离其宗。你先把基础学好了再说
相关问答
Q1: 关于JavaScript的生成下拉菜单代码
既然是下拉式菜单嘛
肯定不会只有JS
语句嘛
起码要有一些HTML的标签哦
记住一点
JS
菜单是
动态的管理HTML和CSS的
HTML
静态显示
CSS
管理HTML的显示效果
javascript
在浏览器上动态的管理HTML和CSS以及一些操作
你也没有把全部代码写出来
估计也没什么好回答的
除非人家给你一个现成的代码
我给你说说下拉式菜单的实现原理吧
任何HTML的标签都有个style属性..这里可以设置CSS属性
就是控制这个标签的样式属性..里头有个属性叫display
当这个display的值是none的时候..这个标签在浏览器上就不会显示,但是浏览器会读取它的数据
只是不展示给用户而已
下拉式菜单,说白了就是你点一下菜单,弹出一个子菜单而已..有点编程的基础就知道该怎么做啦..
事先设置好你要显示的子菜单,并在它的HTML属性里加一个
style="display:none;"意思就是告诉浏览器这个标签的所有内容都不显示
然后javascript语句
获得那个标签之后呢.比如e就是JS代码中对这个标签的对象引用啦
设置e.style.display='';//空就表示是默认了,而默认是要显示的
那么这个标签就会显示了呀..这个JS
代码你可以作为一个事件处理程序中的一部分..放在onclick里
就形成了点一下按钮才弹出那个菜单了噻....
要是你点都不懂编程
肯定不明白我说的啥子
要做这个下拉菜单..起码要懂HTML
javascript
和CSS的一些最基本基础
Q2: 我想知道javascript滑动菜单的实现原理？
原理么：首先设计菜单部分的div，利用css设置好div的位置、显示方式，比如滑出的部分首先隐藏起来；然后用javascript的dom、事件编程技巧，查找相关的div，让其显示或隐藏。
网上有很多jquery的源代码，用jquery实现比较方便吧。
Q3: Javascript实现下拉菜单的方法?
HTML
HEAD
META http-equiv="Content-Type" content="text/html; charset=gb2312"
TITLE树形菜单/TITLE
STYLE type="text/css"
DIV {
FONT-SIZE: 13px; COLOR: #000000; LINE-HEIGHT: 22px;
}
A{FONT-SIZE: 13px; COLOR: #000000; TEXT-DECORATION: none}
A:hover {FONT-SIZE: 13px; COLOR: #999999}
/STYLE
SCRIPT language="JavaScript"
function show(d1){
if(document.getElementById(d1).style.display=='none'){
document.getElementById(d1).style.display='block'; //如果触动的层如果处于隐藏状态，即显示
}
else{
document.getElementById(d1).style.display='none'; //如果触动的层如果处于显示状态，即隐藏
}
}
/SCRIPT
/HEAD
BODY
DIV HEIGHT="30"
FONT color="#CC0000" BIMG src="image/fold.gif" width="16" height="16" align="absmiddle"树形菜单：/B/FONT
/DIV
A href="javascript:onClick=show('1') "IMG src="image/fclose.gif" border="0" align="absmiddle" 文学艺术/A
DIV id="1" style="display:none"
IMG src="image/doc.gif" align="absmiddle"先锋写作BR
IMG src="image/doc.gif" align="absmiddle"小说散文BR
IMG src="image/doc.gif" align="absmiddle"诗风词韵
/DIV
DIV
A href="javascript: onClick=show('2') "IMG src="image/fclose.gif" border="0" align="absmiddle"贴图专区/A
/DIV
DIV id="2" style="display:none"
IMG src="image/doc.gif" align="absmiddle"真我风采BR
IMG src="image/doc.gif" align="absmiddle"视频贴图BR
IMG src="image/doc.gif" align="absmiddle"行行摄摄BR
IMG src="image/doc.gif" align="absmiddle"Flash贴图
/DIV
/BODY
/HTML
Q4: 如何利用javascript实现二级菜单
可以用二维数组实现
1 给一级菜单和子菜单2个id,然后根据id获取内容存入数组,用数组下标把菜单项显示出来
Q5: javascript下拉菜单
html
head
.....
script language="javascript" type="text/jscript"
function showTab(tabContentId)
{
if(document.getElementById(tabContentId).style.display=='block') //这么写
{
document.getElementById(tabContentId).style.display = 'none';
}
else
{
document.getElementById(tabContentId).style.display = 'block';
}
}
/script
/head
body
.....
div id="aa"
li onClick="showTab('tabContent1');"a href="#"sdfsd/a/li
/div
div id="tabContent1" style="display:block"
lia href="#"gdfdg/a/li
lia href="#"dfgdf/a/li
lia href="#"dfgdf/a/li
/div
.....
/body
/html
