-2

下の赤でマークされた画像に示すように、画面に上下左右に3つの画像があるHTML5 Windowsアプリに取り組んでいます。

ここに画像の説明を入力

ボタンをクリックしたときに画像をスライドさせて、1回のクリックでその3つの画像を非表示にしたいだけです。HTMl5/javascriptを使用してそれを行う方法に関するコードを提供してください

プログラムのコードはこちら

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>TamilKarpom</title>

<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

<script>
    function diffImage(img) {
        if (img.src.match("images/on_btn.png")) {
            console.log('Low');
            img.src = "images/off_btn.png";
        }
        else {
            console.log('up');
            img.src = "images/on_btn.png";
        }
    }


</script>

<!-- TamilKarpom references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
</head>
<body>
<img src="images/Title.png" id="full-screen-background-image"/>
<img src="images/yellow.png" id="image4"  style="position:absolute; height: 734px; left: 1195px; top: 41px; width: 229px;"/>
<img src="images/glow.png" style="position:absolute" id="full-screen" />
<a href="uyireluthukkal.html">
<img src="images/blue.png" id="image3" style="position:absolute; left: 253px; top: -100px; width: 880px; height: 276px;"/>
</a>
<img src="images/red.png" id="image2" style="position:absolute; width: 220px; left: -48px; top: 24px; height: 734px;"/>
<img src="images/title_01.png"style="position:absolute; left: 330px; top: 58.5px; width: 700px; height: 630px;" />
<img  style="position:absolute; left: 593.5px; top: 636.33px; width: 171px; height: 122.5px;" src="images/off_btn.png"  id="image1"   onclick="diffImage(this); "/>
 </body>
  </html>
4

1 に答える 1

1

最も簡単な方法は、Javascript と CSS を組み合わせて使用​​することです。良い答えを得るには、ソースコードを投稿する必要がありますが、試してみます:

最初に、スクリプトによって検出されるコードを準備します。たとえば、スイッチの ID を「switchToHideImages」に設定します。

<img id="switchToHideImages" src=" .....

表示/非表示にする画像にクラスを追加します (例: "myImages")。

<img class="myImages" src=" .....

次に、myImagesHidden などと呼ばれる css クラスを作成します。

.myImagesHidden {
    display: none; /* this will hide all elements which have this class */
}

次に、jQuery を使用して、このコードを HTML ページの下部に追加します (JavaScript がページの読み込みを遅くしないようにするためのベスト プラクティス)。

サイトにまだ jQuery がない場合は、次の行を追加します。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

次に、これ、関数自体：

<script>
    $(document).ready(function(){
        $("#switchToHideImages").on("click", function(){
            $(".myImages").toggleClass("myImagesHidden");
        });
    });
</script>

ボタンをクリックすると、「myImages」クラスの画像が選択され、「myImagesHidden」クラスが追加されます。これにより、それらが消えます。スイッチがクリックされたときにクラス "myImagesHidden" が要素 (ここでは画像) に既に存在する場合、それは削除され、画像が再表示されます。

編集：

他の人がすでに言ったように、JSFiddle を使用すると、コードを試して助けやすくなります。しかし、これを試してください：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>TamilKarpom</title>

        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />

        <style>
            .myImagesHidden {
                display: none; /* this will hide all elements which have this class */
            }
        </style>

        <!-- TamilKarpom references -->
        <link href="/css/default.css" rel="stylesheet" />
    </head>
    <body>
        <img class="myImages" src="images/Title.png" id="full-screen-background-image"/>
        <img class="myImages" src="images/yellow.png" id="image4"  style="position:absolute; height: 734px; left: 1195px; top: 41px; width: 229px;"/>
        <img src="images/glow.png" style="position:absolute" id="full-screen" />
        <a href="uyireluthukkal.html">
            <img class="myImages" src="images/blue.png" id="image3" style="position:absolute; left: 253px; top: -100px; width: 880px; height: 276px;"/>
        </a>
        <img class="myImages" src="images/red.png" id="image2" style="position:absolute; width: 220px; left: -48px; top: 24px; height: 734px;"/>
        <img src="images/title_01.png"style="position:absolute; left: 330px; top: 58.5px; width: 700px; height: 630px;" />
        <img  style="position:absolute; left: 593.5px; top: 636.33px; width: 171px; height: 122.5px;" src="images/off_btn.png"  id="switchToHideImages"   onclick="diffImage(this); "/>

        <!-- TamilKarpom references -->
        <script src="/js/default.js"></script>
        <!-- WinJS references -->
        <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
        <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

        <!-- jQuery -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script>
            function diffImage(img) {
                if (img.src.match("images/on_btn.png")) {
                    console.log('Low');
                    img.src = "images/off_btn.png";
                }
                else {
                    console.log('up');
                    img.src = "images/on_btn.png";
                }
            }

            //Add event listener to the switch, and set it to toggle the images with the class "myImages"
            $(document).ready(function(){
                $("#switchToHideImages").on("click", function(){
                    $(".myImages").toggleClass("myImagesHidden");
                });
            });
        </script>
    </body>
</html>
于 2013-09-20T11:22:27.983 に答える