使用链接隐藏元素

Question

我有一个包含两张图片和一些文本的网站。我需要对其进行编码，以便它在加载时显示文本，但是当单击链接时，文本消失并出现图像。当单击不同的链接时，会出现另一个图像。这可能需要 javascript/jquery。我已经研究过如何更改课程，以便它确实显示：无，但我无法让它工作。谢谢。这是一个模型：http://amosjackson.com/index

Answer 1

将 hide() 和 show() 与 click 事件结合使用。

$('#myLink1').click(function() {
   $('#image1').show();
   $('#text1').hide();
});

Answer 2

要使用 JQuery，您必须从 http://jquery.com/ 下载它，并将其放在站点中您想要的位置，然后你必须将其导入到你想要使用它的页面中。

将其放入页面头部：

<script>
    $(document).ready(function(){
        $('#homelink').click(function() {
            $('#contact,#tardis').addClass("invisible");
            $('#home').removeClass("invisible");
        });
        $('#bloglink').click(function() {
            $('#contact,#home').addClass("invisible");
            $('#tardis').removeClass("invisible");
        });
        $('#contactlink').click(function() {
            $('#tardis,#home').addClass("invisible");
            $('#contact').removeClass("invisible");
        });
    });
</script>

将 href="" 更改为 href菜单链接中的 ="javascript:void(0)"。

在 CSS 中放置此类：

.invisible{ display: none; }

最后在名为 contact 和 tardis 的 DIV 上设置 invisible 类。