Question

我想要两个单独的图像列表。它们被包含在两个独立的div中，其中包含“web”和“nonweb”类。我想在顶部有两个按钮。

点击“网站设计”按钮后，所有“非网络”内容都会消失，并显示“网页”内容。 “网站设计”图像也会更改为不同的图像。我将有两个按钮，“网站设计”和“非网站设计”。加载页面后，它们将呈黑白两种形式。单击其中一个时，相反的按钮内容将保持隐藏状态，并且将显示按钮链接的内容。点击的按钮也将变为更亮的按钮。

如果单击其他按钮，则所有相反按钮的内容将自行隐藏，而另一个按钮将更改回黑白版本，而单击按钮将更改，并且其内容将显示，yada yada yada。 / p>

我一直在考虑它，似乎无法找到正确的方法。使用代码检查此贴纸以获得更详细的版本：

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

谢谢！

Answer 1

我写了这个，请注意我是大学的第一年＆gt;＆lt;

应该按照您的意愿，只需根据需要更改网址。

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

jQuery - 更改图像和隐藏

1 个答案: