Question

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

我有下面的代码，我正在尝试使代码使用class而不是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>

Answer 1

您的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以了解何时添加display：none。

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

1 个答案: