1

1 つのボタンで複数の div を表示/非表示にしようとしていますが、その方法について混乱しています。ボタンは 1 つの 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;
    }   
}

最後に、ボタン コードはクラス名としてsetVisibilitypassingを呼び出します。toggleVisible

<input type=button name=type id='bt1' onclick="setVisibility('toggleVisible');";>
于 2012-07-16T20:09:20.250 に答える