采用CSS和JS的下拉菜单的制作

JavaScript09

采用CSS和JS的下拉菜单的制作,第1张

<script language="javascript">// JavaScript DocumentstartList = function() {if (document.all&&document.getElementById) {navRoot = document.getElementById("nav")for (i=0i<navRoot.childNodes.lengthi++) {node = navRoot.childNodes[i]if (node.nodeName=="LI") {node.onmouseover=function() {this.className+=" over"} node.onmouseout=function() { this.className=this.className.replace(" over", "")} } } }}window.onload=startList</script><style type=text/css><!--body { font: normal 11px verdana}ul { margin: 0padding: 0list-style: nonewidth: 150px/* Width of Menu Items */ border-bottom: 1px solid #ccc} ul li { position: relative} li ul { position: absoluteleft: 149px/* Set 1px less than menu width */ top: 0display: none}/* Styles for Menu Items */ul li a { display: blocktext-decoration: nonecolor: #777background: #fff/* IE6 Bug */ padding: 5pxborder: 1px solid #ccc/* IE6 Bug */ border-bottom: 0} /* Holly Hack. IE Requirement */* ul li { float: leftheight: 1%}* ul li a { height: 1%}/* End */li:hover ul, li.over ul { display: block} /* The magic */--></style><ul id="nav"><li><a #">Home</a></li><li><a #">About</a><ul><li><a #">History</a></li><li><a #">Team</a></li><li><a #">Offices</a></li></ul></li><li><a #">Services</a><ul><li><a #">Web Design</a></li><li><a #">Internet Marketing</a></li><li><a #">Hosting</a></li><li><a #">Domain Names</a></li><li><a #">Broadband</a></li></ul></li><li><a #">Contact Us</a><ul><li><a #">United Kingdom</a></li><li><a #">France</a></li><li><a #">USA</a></li><li><a #">Australia</a></li></ul></li></ul>        lishixinzhi/Article/program/Java/Javascript/201311/25433

本文实例讲述了js使用DOM设置单选按钮、复选框及下拉菜单的方法。分享给大家供大家参考。具体实现方法如下:

1.设置单选按钮

单选按钮在表单中即<input

type="radio"

/>它是一组供用户选择的对象,但每次只能选一个。每一个都有checked属性,当一项选择为ture时,其它的都变为false.

先贴上一个例子:

复制代码

代码如下:<script

type="text/javascript">

function

getChoice()

{

var

oForm

=

document.forms["uForm1"]

var

aChoices

=

oForm.camera

for

(i

=

0

i

<

aChoices.length

i++)

//遍历整个单选项表

if

(aChoices[i].checked)

//如果发现了被选中项则退出

break

alert("相机品牌是:"

+

aChoices[i].value)

}

function

setChoice(iNum)

{

var

oForm

=

document.forms["uForm1"]

oForm.camera[iNum].checked

=

true

}

</script>

<form

method="post"

name="uForm1"

action="addInfo.aspx">

相机品牌:

<p>

<input

type="radio"

name="camera"

id="canon"

value="Canon">

<label

for="canon">Canon</label>

</p>

<p>

<input

type="radio"

name="camera"

id="nikon"

value="Nikon">

<label

for="nikon">Nikon</label>

</p>

<p>

<input

type="radio"

name="camera"

id="sony"

value="Sony"

checked>

<label

for="sony">Sony</label>

</p>

<p>

<input

type="radio"

name="camera"

id="olympus"

value="Olympus">

<label

for="olympus">Olympus</label>

</p>

<p>

<input

type="radio"

name="camera"

id="samsung"

value="Samsung">

<label

for="samsung">Samsung</label>

</p>

<p>

<input

type="radio"

name="camera"

id="pentax"

value="Pentax">

<label

for="pentax">Pentax</label>

</p>

<p>

<input

type="radio"

name="camera"

id="others"

value="其它">

<label

for="others">others</label>

</p>

<p>

<input

type="submit"

name="btnSubmit"

id="btnSubmit"

value="Submit"

class="btn">

</p>

<p>

<input

type="button"

value="检测选中对象"

onclick="getChoice()">

<input

type="button"

value="设置为Canon"

onclick="setChoice(0)">

</p>

</form>