1

我试图用一个按钮显示/隐藏多个 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>&nbsp;    PRODUCTS    &nbsp;<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>
4

1 回答 1

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');";>
于 2012-07-16T20:09:20.250 回答