我试图用一个按钮显示/隐藏多个div，但我很困惑如何去做。该按钮仅用于设置一个div的可见性，但我无法使用多个。
<html>
<head>
<title>| Bali Thai Imports |</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Description" content="Wholesale fashion accessories, discount designer handbags, vases, wall hangings, decorative bird cages, musical instruments, lanterns and offered by Bali Thai Imports." />
<meta name="Keywords" content="wholesale fashion accessories, discount designer handbags, decorative bird cages, decorative vases, online musical instruments, decorative lanterns, wholesale keychains, discount vases, decorative pillow covers, wind chimes for sale, decorative wall hanging, decorative wall hangings, kites" />
<meta name="robots" content="Index,ALL" />
<meta name="revisit-after" content="7 Days" />
<meta name="rating" content="General" />
<meta name="language" content="en" />
<meta name="distribution" content="Global" />
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<script language="JavaScript">
function setVisibility(id) {
if(document.getElementById('bt1').value=='Hide Layer'){
document.getElementById('bt1').value = 'Show Layer';
document.getElementById(id).style.display = 'none';
}else{
document.getElementById('bt1').value = 'Hide Layer';
document.getElementById(id).style.display = 'inline';
}
}
</script>
<script type="text/javascript">
var activeMenuItem = new Array();
function isUlInArray(inputObj,ulObj){
while(inputObj && inputObj.id!='dhtmlgoodies_listMenu'){
if(inputObj==ulObj)return true;
inputObj = inputObj.parentNode;
}
return false;
}
function showHideSub(e,inputObj)
{
if(!inputObj)inputObj=this;
var parentObj = inputObj.parentNode;
var ul = parentObj.getElementsByTagName('UL')[0];
if(activeMenuItem.length>0){
for(var no=0;no<activeMenuItem.length;no++){
if(!isUlInArray(ul,activeMenuItem[0]) && !isUlInArray(activeMenuItem[0],ul)){
activeMenuItem[no].style.display='none';
activeMenuItem.splice(no,1);
no--;
}
}
}
if(ul.offsetHeight == 0){
ul.style.display='block';
activeMenuItem.push(ul);
}else{
ul.style.display='none';
}
}
function showHidePath(inputObj)
{
var startTag = inputObj;
showHideSub(false,inputObj);
inputObj = inputObj.parentNode;
while(inputObj){
inputObj = inputObj.parentNode;
if(inputObj.tagName=='LI')showHideSub(false,inputObj.getElementsByTagName('A')[0]);
if(inputObj.id=='dhtmlgoodies_listMenu')inputObj=false;
}
}
function initMenu()
{
var obj = document.getElementById('dhtmlgoodies_listMenu');
var linkCounter=0;
var aTags = obj.getElementsByTagName('A');
var activeMenuItem = false;
var activeMenuLink = false;
var thisLocationArray = location.href.split(/\//);
var fileNameThis = thisLocationArray[thisLocationArray.length-1];
if(fileNameThis.indexOf('?')>0)fileNameThis = fileNameThis.substr(0,fileNameThis.indexOf('?'));
if(fileNameThis.indexOf('#')>0)fileNameThis = fileNameThis.substr(0,fileNameThis.indexOf('#'));
for(var no=0;no<aTags.length;no++){
var parent = aTags[no].parentNode;
var subs = parent.getElementsByTagName('UL');
if(subs.length>0){
aTags[no].onclick = showHideSub;
linkCounter++;
aTags[no].id = 'aLink' + linkCounter;
}
if(aTags[no].href.indexOf(fileNameThis)>=0 && aTags[no].href.charAt(aTags[no].href.length-1)!='#'){
if(aTags[no].parentNode.parentNode){
var parentObj = aTags[no].parentNode.parentNode.parentNode;
var a = parentObj.getElementsByTagName('A')[0];
if(a.id && !activeMenuLink){
activeMenuLink = aTags[no];
activeMenuItem = a.id;
}
}
}
}
if(activeMenuLink){
activeMenuLink.className='activeMenuLink';
}
if(activeMenuItem){
if(document.getElementById(activeMenuItem))showHidePath(document.getElementById(activeMenuItem));
}
}
window.onload = initMenu;
</script>
<style type="text/css">
<!--
body {
background-color: #cc5302;
}
-->
</style>
</head>
<body>
<div id="title"><img src="images/title2.png" alt=""></div>
<div id="topBanner">LIKE US ON FACEBOOK FOR A 10% DISCOUNT!</div>
<div id="productsTitle"><span style="color:white;font-weight=bold;"><span style="color:black;">| </span> PRODUCTS <span style="color:black;"> |</span></span></div>
<div id="topNav"><ul class="topnavigation">
|
<li><a href="index.htm">HOME</a></li>
|
<li><a href="http://balithaiimports.3dcartstores.com/view_cart.asp">VIEW CART</a></li>
|
<li><a href="http://balithaiimports.3dcartstores.com/">PRODUCTS</a></li>
|
<li><a href="http://balithaiimports.3dcartstores.com/About-Us_ep_7.html">ABOUT US</a></li>
|
<li><a href="https://balithaiimports.3dcartstores.com/myaccount.asp?">MY ACCOUNT</a></li>
|
<li><a href="https://balithaiimports.3dcartstores.com/crm.asp?action=contactus">CONTACT US</a></li>
|
</ul>
</div>
<div id="centerRotator">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="650" height="457">
<param name="movie" value="Flash/center_rotator.swf">
<param name="quality" value="high">
<embed src="Flash/center_rotator.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="650" height="457"></embed>
</object>
</div>
<!--<div id="socialNetworking">Social Networking</div>-->
<div id="facebook"><a href="https://www.facebook.com/pages/Bali-Thai-Imports/184255874965768"><img src="images/Facebook.png" width="40" height="40" align="middle" alt="Like us On Facebook" /></a> </div>
<div id="twitter"><a href="https://twitter.com/BaliThaiImports"><img src="http://a0.twimg.com/a/1341848431/images/resources/twitter-bird-light-bgs.png" width="80" height="80" align="middle" alt="Follow us on Twitter" /></a> </div>
<div id="pinterest"><a href="http://pinterest.com/balithaiimports/"><img src="http://passets-ec.pinterest.com/images/about/buttons/pinterest-button.png" width="80" height="28" alt="Follow Us on Pinterest" /></a></div>
<div id="manta"><a href="http://www.manta.com/c/mxcpctc/bali-thai-imports"><img src="images/mantaBadge_lg.png" width="80" height="40" alt="Follow Us on Manta" /></a></div>
<div id="logo"><img src="images/Logo.jpg" width="155" height="220" alt=""></div>
<div id="products">
<ul id="dhtmlgoodies_listMenu">
<li><a href="http://balithaiimports.3dcartstores.com/Jewelry_c_39.html">Jewelry</a>
<li><a href="http://balithaiimports.3dcartstores.com/Pottery_c_150.html">Pottery</a></li>
<li><a href="http://balithaiimports.3dcartstores.com/Toys_c_160.html">Toys</a></li>
<li><a href="http://balithaiimports.3dcartstores.com/Lanterns_c_98.html">Lanterns</a></li>
<li><a href="http://balithaiimports.3dcartstores.com/Bags_c_95.html">Handbags</a></li>
<li><a href="http://balithaiimports.3dcartstores.com/Batik-Shoulder-Bags_c_138.html">Batik Shoulder Bag</a></li>
<li><a href="http://balithaiimports.3dcartstores.com/Hats_c_183.html">Hats</a></li>
<li><a href="http://balithaiimports.3dcartstores.com/Incense_c_69.html">Incense</a></li>
<li><a href="http://balithaiimports.3dcartstores.com/Mobiles_c_180.html">Mobiles</a></li>
<li><a href="http://balithaiimports.3dcartstores.com/Childrens-Bags_c_181.html">Children's Backpacks</a></li>
<li><a href="http://balithaiimports.3dcartstores.com/Birdcage-Decoration_c_205.html">Decorative Birdcages</a></li>
<li><a href="http://balithaiimports.3dcartstores.com/Musical-Instruments_c_158.html">Musical Instruments</a></li>
<li><a href="http://balithaiimports.3dcartstores.com/Hand-Painted-Containers_c_111.html">Hand Painted Containers</a></li>
<li><a href="http://balithaiimports.3dcartstores.com/Windchimes_c_99.html">Windchimes</a></li>
<li><a href="http://balithaiimports.3dcartstores.com/Wood-Carvings_c_156.html">Wood Carvings</a></li>
<li><a href="http://balithaiimports.3dcartstores.com/Story-Boards_c_167.html">Storyboards</a></li>
<li><a href="#">Gift Items</a>
<ul>
<li><a href="http://balithaiimports.3dcartstores.com/Coconut-Shells_c_202.html">Coconut Shells</a></li>
<li><a href="http://balithaiimports.3dcartstores.com/Bells_c_217.html">Gongs & Bells</a></li>
<li><a href="http://balithaiimports.3dcartstores.com/Statues_c_211.html">Statues</a></li>
<li><a href="http://balithaiimports.3dcartstores.com/Napkin-Rings_c_106.html">Napkin Rings</a></li>
<li><a href="http://balithaiimports.3dcartstores.com/Bowls_c_125.html">Wooden Bowls</a></li>
<li><a href="http://balithaiimports.3dcartstores.com/Trays_c_201.html">Trays</a></li>
</ul>
</li>
<li><a href="http://balithaiimports.3dcartstores.com/Wall-Hangings_c_124.html">Wall Hangings</a></li>
<li><a href="#">Clothing</a>
<ul>
<li><a href="http://balithaiimports.3dcartstores.com/Sandals_c_172.html">Sandals</a></li>
<li><a href="http://balithaiimports.3dcartstores.com/Sarong-Buckles_c_152.html">Sarong Buckles</a></li>
<li><a href="http://balithaiimports.3dcartstores.com/Scarves_c_194.html">Silk Scarves</a></li>
</ul>
</li>
<li><a href="http://balithaiimports.3dcartstores.com/Umbrellas_c_121.html">Umbrellas</a></li>
<li><a href="http://balithaiimports.3dcartstores.com/Backpacks_c_139.html">Backpacks</a></li>
<li><a href="http://balithaiimports.3dcartstores.com/Vases_c_47.html">Vases</a></li>
<li><a href="http://balithaiimports.3dcartstores.com/Sarongs_c_187.html">Sarongs</a></li>
</ul>
</div>
<div id="footer"><span class="footer">Bali Thai Imports LLC - 2011 All Rights Reserved</span></div>
<div id="pictureOne"><img src="images/dscn0062.jpg" alt=""></div>
<div id="pictureTwo"><img src="images/jsr-03.jpg" alt=""></div>
<div id="pictureThree"><img src="images/snr0.jpg" alt=""></div>
<div id="pictureFour"><img src="images/brb050.jpg" alt=""></div>
<div id="pictureFive"><img src="images/cipa-02h.jpg" alt=""></div>
<div id="pictureSix"><img src="images/21840499b_2.jpg" alt=""></div>
<div id="pictureSeven"><img src="images/gd-02.jpg" alt=""></div>
<div id="pictureEight"><img src="images/sst-098.jpg" alt=""></div>
<div id="productsBackground"><img src="images/productsBackground.png" alt=""></div>
<div id="divider1"><img src="images/divider.png" alt=""></div>
<div id="divider2"><img src="images/divider.png" alt=""></div>
<input type=button name=type id='bt1' onclick="setVisibility('products');";>
</body>
</html>
答案 0 :(得分：0)
你需要做的是在你需要显示/隐藏的div中添加一个类，让我们说：toggleVisible。所以这些div的html看起来像这样：
<div id="productsTitle" class="toggleVisible"> ... </div>
<div id="products" class="toggleVisible"> ... </div>
<div id="productsBackground" class="toggleVisible"> ... </div>
然后你的setVisibility函数，而不是接收id作为参数，它将收到一个类名，所以在你的函数中你将获得具有这样的类名的所有元素，并改变它的可见性：
function setVisibility(className) {
var elems = document.getElementsByClassName(className);
var displayVal;
if(document.getElementById('bt1').value=='Hide Layer'){
document.getElementById('bt1').value = 'Show Layer';
displayVal = 'none';
}else{
document.getElementById('bt1').value = 'Hide Layer';
displayVal = 'inline';
}
for (var i = 0; i < elems.length; i++) {
elems[i].style.display = displayVal;
}
}
最后，您的按钮代码会调用setVisibility作为类名传递toggleVisible：
<input type=button name=type id='bt1' onclick="setVisibility('toggleVisible');";>