将函数“document.getElementById”更改为“document.getElementsByClassName”并添加淡入/淡出 - JavaScript

我对JavaScript的知识非常有限，希望有人能够帮助我！将函数“document.getElementById”更改为“document.getElementsByClassName”并添加淡入/淡出 - JavaScript

我有下面的代码，我试图使代码工作，而不是类，然后添加淡入/淡出效果这些功能。我已经添加了一个类和ID设置尝试尽可能清楚我想要做的事情。

<!DOCTYPE html> 
<html> 
    <head> 
    <style> 
     .sub1, .sub2 { 
     float: right; 
     background-color: blue; 
     width: 250px; 
     height: 250px; 
     display: none; 
     } 

     #sub1, #sub2 { 
     float: right; 
     background-color: red; 
     width: 250px; 
     height: 250px; 
     display: none; 
     } 

    </style> 
    <script language="javascript" type="text/javascript"> 
    // class 
     function SetTabsHidden(tabToHide) 
     { 
     document.getElementsByClassName('.sub1').style.display = "none"; 
     document.getElementsByClassName('.sub2').style.display = "none"; 

     } 


     function SetTabsVisible(tabToShow) 
     { 
     document.getElementsByClassName('.sub1').style.display = "none"; 
     document.getElementsByClassName('.sub2').style.display = "none"; 

     document.getElementsByClassName(tabToShow).style.display = "block"; 

     } 

    // id 
     function SetTabsHidden(tabToHide) 
     { 
     document.getElementById('sub1').style.display = "none"; 
     document.getElementById('sub2').style.display = "none";       
     $(tabToHide).fadeOut("slow"); 
     } 


     function SetTabsVisible(tabToShow) 
     { 
     elements = document.getElementById('sub1').style.display = "none"; 
     elements = document.getElementById('sub2').style.display = "none"; 

     elements = document.getElementById(tabToShow).style.display = "block"; 
     $(tabToShow).fadeIn("slow"); 

     } 


    </script> 


    </head> 
    <body> 
    <div id="main"> 
    <input type=button name=type value='class1' onclick="SetTabsVisible('.sub1');";> 
    <input type=button name=type value='class2' onclick="SetTabsVisible('.sub2');";> 
    <input type=button name=type value='id1' onclick="SetTabsVisible('sub1');";> 
    <input type=button name=type value='id2' onclick="SetTabsVisible('sub2');";> 

    <input type=button name=type value='Hide' onclick="SetTabsHidden();";> 


    <div class="sub1" id="sub1"></div> 

    <div class="sub2" id="sub2"></div> 

    </body> 
</html>

来源

2013-04-06 Sarah

你getElementsByClassName不会起作用，因为你不希望包含在类名前的时间（你会发现，byID不包括＃。同样的想法），只是将其更改为SUB1或sub2或其他什么，它应该开始工作。

您定义了四个函数，但它们具有相同的名称，这不起作用。

您必须为它们命名一些与“SetTabsVisibleByClass”类似的东西....或者您只能使用两个函数，但传递另一个参数让它知道它是您希望使用的类还是id。

您的示例代码使用jQuery进行淡入淡出。如果你打算使用jQuery，你不需要额外的逻辑。它可以为您处理：

$(".sub1, .sub2").hide()

，或者，如果他们都包含在一起，你可以这样做：

$(tabToShow).siblings().hide()

，然后你不必记住所有的不同类名称。

如果你不打算使用jQuery，那么对于渐变，你也可以使用CSS转换。喜欢的东西：

.sub1, .sub2, .sub3 { 
    opacity: 0; 
} 

.sub1.active, .sub2.active, .sub3.active { 
    opacity: 1; 
-webkit-transition: opacity 1s linear; 
    -moz-transition: opacity 1s linear; 
    -ms-transition: opacity 1s linear; 
    -o-transition: opacity 1s linear; 
    transition: opacity 1s linear; 
}

annnd

document.getElementById(tabToShow).setAttribute("class", "active")

当然，这种方法是指不使用display: none，这可能是对你很重要。在这种情况下，您可能想要为transitionEnd添加event listeners以知道何时添加显示：无。

来源

2013-04-10 04:36:46 Rose

将函数“document.getElementById”更改为“document.getElementsByClassName”并添加淡入/淡出 - JavaScript

回答

相关问题