1

我对 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>
4

1 回答 1

0

您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;
}

安南德

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

当然，这种方法意味着不使用display: none，这可能对您很重要。在这种情况下，您可能需要添加事件侦听器transitionEnd以了解何时添加 display: none。

于 2013-04-10T04:36:46.037 回答