1

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

1 に答える 1