简体   繁体   中英

Javascript Hide/Show div not working

im having trouble running javascript hide/show div using CSS classes, when i click on the trigger nothing happens. The relevant codes are the following:

HTML

        <a href="" onclick="toggleClass(test,hidden)">Click</a>
        <div id="test" class="hidden">
        test    
        </div>

CSS

 .hidden{
        display:none;
 }

JS

function toggleClass(eid, myclass) {
 var theEle = document.getElementById(eid);
 var eClass = theEle.className;

 if (eClass.indexOf(myclass) >= 0) {

 theEle.className = eClass.replace(myclass, "");
 } else{

   theEle.className  += "" +myclass;
}
}

im not 100% certain, but im pretty sure you need to enclose the arguments in quotation marks

<a href="" onclick="toggleClass('test','hidden')">Click</a>
    <div id="test" class="hidden">
    test    
    </div>

two issues: you missed a "#" for the href + ' for the test and hidden (must be strings):

<a href="#" onclick="toggleClass('test','hidden')">Click</a>
 <div id="test" class="hidden">
        test    
 </div>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM