“更改功能”文档.getElementById " to "文档.getElementsByClassName”,添加淡

Change function “document.getElementById” to “document.getElementsByClassName” & add fade in/out - JavaScript

本文关键字：文档 getElementsByClassName 添加 to 更改功能 getElementById 功能      更新时间：2023-09-26

我对JavaScript的了解非常有限，我希望有人能帮助我!

我有下面的代码，我试图使代码工作与类，而不是id，还添加了淡入/淡出效果在这些函数。我已经添加了一个类和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>

您的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添加事件侦听器，以便知道何时添加display: none。

相关文章：