將函數「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

回答

相關問題