如何在没有“隐藏 div”或“不显示”的情况下切换内容？答案

【问题标题】：How to toggle content without "hidden div" or "display none"?如何在没有“隐藏 div”或“不显示”的情况下切换内容？
【发布时间】：2014-02-22 13:24:45
【问题描述】：

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

有谁知道如何使用 javascript 安全地做到这一点？

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

【问题讨论】：

考虑详细说明您的问题。它有点宽泛。对于一个简单的方法，function switchContent () { getElementById('myDiv').innerHTML = "my content" } 然后<button onClick="switchContent()">My button</button>
您可以在白色背景上的白色文本中包含您的 SEO 关键字。就像 1995 年一样。
搜索引擎仍在寻找屏幕外文本或相同颜色的字体，所以真的是the point is moot。有关详细信息，请参阅Google's content guidelines on hidden text。
你可以让内容保持原样，然后用js隐藏在pageLoad中，因为搜索引擎不执行js，你的内容不会为他们隐藏

标签： javascript

【解决方案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>

然后启用显示/隐藏的 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/

【讨论】：

【解决方案2】：

也许您可以定位 z-index 并将隐藏的内容向前并放在隐藏它的背景层之上？另一种方法是将宽度+高度设置为 0px 并在单击链接时将其展开。您也可以尝试使用 left+top 设置将内容移出屏幕，甚至不透明度设置也可能起作用。这是你的选择。

【讨论】：