Question

我的脚本有问题，当我点击隐藏div时，它不起作用。但是为了使其可见，它的效果非常好。

你能帮我解释一下吗？

function visibilite(id) {
        var divs = document.getElementsByTagName('div');
        for(var no=0;no<divs.length;no++){
            if(divs[ no].className=='divs bouton' || divs[ no].className=='divs'){ // Target div which called "divs" OR called "divs bouton"
                divs[ no].style.display = "none"; // hide them all
            }
        }   
        document.getElementById(id).style.display = "block"; // visible
    }

HTML代码：

<head>
    <link href="ress/css/stylesheet.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="js/baseScript.js"></script>
    <style type="text/css">
    /*<![CDATA[*/
     .divs {display:none;padding:5px;margin:10px;}
    /*]]>*/
    </style>
    <script type="text/javascript">
    //<![CDATA[
    function visibilite(id) {
        var divs = document.getElementsByTagName('div');
        for(var no=0;no<divs.length;no++){
            if(divs[ no].className=='divs bouton' || divs[ no].className=='divs'){ // Target div which called "divs" OR called "divs bouton"
                divs[ no].style.display = "none"; // hide them all
            }
        }   
        document.getElementById(id).style.display = "block"; // visible
    }
    //]]>
    </script>
  </head>




<body>

    <div style="width:250px;margin:auto;" class="txtlinks" id ="headontainer">
            <div class="col marginR">
                <a style="float:left; margin-right:10px;" href ="#">Installation Kit</a><a href ="#">FAQs</a><br />
            </div>
    </div>



    <div style="width:700px;margin-left:auto;margin-right:auto;" id ="maincontainer">

            <div style="padding-bottom:75px;" onmouseover="this.style.border='1px solid blue'" onmouseout="this.style.border='0px'" id="work_1" >
                <a style="text-transform:none;" href="javascript:visibilite('opt1');">
                <div>
                  <span class="blctxt blueblc">Getting to know Office 365</span>
                  <br />
                  <span style="color: rgb(80, 81, 80); font-family: 'segoe ui', arial, tahoma; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 20px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; display: inline !important; float: none;">
                  Check out see some of the ways Office 365 can help people get things done,
                  better, together</span>.
                </div>
                </a>
                <div id="opt1" class="divs bouton">
                    <br />
                    <br />                      
                    <a style="text-decoration: none; color:white;" href="http://aka.ms/o365booklet" target="_blank">Download PDF</a>
                </div>
            </div>

非常感谢。

Answer 1

你可以写下这个：

function visibilite() {
        var divs = document.getElementsByClassName('divs');
        var bouton = document.getElementsByClassName('bouton');
        if(divs.style.display == 'hidden' || bouton.style.display == 'hidden')
         {
        bouton.style.display = "block";
        divs.style.display = "block"; // visible
        }
        else{
bouton.style.display = "hidden";
        divs.style.display = "hidden"; 
        }
    }

第二次单击后，JavaScript隐藏/可见脚本不会隐藏

1 个答案: