Question

我正在试图弄清楚如何做一些我认为会非常简单的事情，但事实证明这是一项非常重要的任务。我想使用javascript切换某些内容，以便有人必须点击链接才能显示。但是，我更喜欢使用javascript而不必在CSS中添加隐藏div或将显示设置为none，因为搜索引擎可以将其识别为隐藏内容并惩罚您的排名。

有没有人知道如何使用javascript安全地执行此操作？

例如，如果有人点击“这是我的链接”，那么内容“这里是我的内容”会出现吗？

Answer 1

还有其他方法可以“隐藏”内容。不使用display: none或visibility: hidden，甚至不使用宽度或高度。考虑以下CSS：

.hidden {
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
}

使用text-indent将文本推出div的框，不要让空格包装文本并隐藏任何文本溢出。

如果你的HTML是这样的：

<a href="#" class="trigger">this is my link</a>
<div class="content hidden">here is my content</div>

然后启用show / hide的Javascript将只添加/删除类名（此示例使用jQuery）：

var $content = $('.content');
$('.trigger').click(function(e) {
    if ($content.hasClass('hidden')) {
        $content.removeClass('hidden');
    } else {
        $content.addClass('hidden');
    }
});

在行动http://jsfiddle.net/amyamy86/45s9N/

中查看此内容

Answer 2

也许您可以定位z-index并将隐藏的内容向前移动并隐藏在背景图层的顶部？另一种方法是将宽度+高度设置为0px，并在链接上单击它。您还可以尝试使用左侧+顶部设置将内容移出屏幕，甚至可以使用不透明度设置。这是你的选择。

如何在没有“hidden div”或“display none”的情况下切换内容？

2 个答案: