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 src="/path/to/jquery/jquery-x.x.x.min.js"></script>

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

最后在名为联系人的invisible和 tardis 上设置DIV课程。

使用链接隐藏元素

2 个答案: