0

画像である 2 つの個別のリストが必要です。それらは、クラス「web」と「nonweb」を持つ 2 つの別個の div 内にラップされます。上部に2つのボタンが必要です。

「Web サイトのデザイン」ボタンをクリックすると、すべての「非 Web」コンテンツが非表示になり、「Web」コンテンツが表示されます。「Webサイトデザイン」のイメージも別のものに変わります。「Web サイトのデザイン」と「非 Web サイトのデザイン」の 2 つのボタンを作成します。ページをロードすると、両方とも白黒の形式になります。いずれかをクリックすると、反対側のボタンのコンテンツは非表示のままになり、リンクされたボタンのコンテンツが表示されます。クリックしたボタンも明るいものに変わります。

もう一方のボタンをクリックすると、反対側のボタンのコンテンツがすべて非表示になり、もう一方のボタンは白黒バージョンに戻りますが、クリックされたボタンは変更され、コンテンツが表示されます。

私はしばらくそれに取り組んできましたが、それを行う正しい方法を見つけることができないようです. コードを含むもう少し詳細なバージョンについては、このパスティを確認してください。

http://pastie.org/private/6b5voiypsdbzfnjogj77g

ありがとうございました！

4

1 に答える 1

1

私はこれを書きました、私は大学1年生であることを知っておいてください ><

必要に応じて URL を変更するだけです。

<script>
$(document).ready(function(){
    $("div.nonweb").hide(); // hide nonweb content by default
    $("div.web").hide(); // hide web content by default

    $("img.webdesigntop").click(function(){
        $("img.webdesigntop").attr("src", "http://www.plaatsoft.nl/wp-content/uploads/RedSquare.jpg"); // color webdesigntop button
        $("img.nonwebdesigntop").attr("src", "https://twimg0-a.akamaihd.net/profile_images/1287988344/blue-square_normal.jpg"); //grayscale nonwebdesigntop button
        $("div.nonweb").hide("fast"); // hide nonweb content
        $("div.web").show("slow"); // show web content
    });

    $("img.nonwebdesigntop").click(function(){
        $("img.webdesigntop").attr("src", "https://twimg0-a.akamaihd.net/profile_images/1287988344/blue-square_normal.jpg"); //grayscale webdesigntop button
        $("img.nonwebdesigntop").attr("src", "http://www.plaatsoft.nl/wp-content/uploads/RedSquare.jpg"); //colour nonwebdesigntop button
        $("div.web").hide("fast"); // hide web content
        $("div.nonweb").show("slow"); // show nonweb content
    });
});
</script>
于 2013-02-12T00:33:03.750 に答える