0

我有一大段 HTML 内容，当使用 fancyBox 启用 JavaScript 时可以查看这些内容。点击阅读更多链接后，fancyBox 会弹出一个显示隐藏内容的窗口。Intro、More 和 Bob 部件显示在 fancyBox 中，但 Intro 和 Bob 部件首先显示，然后单击阅读更多链接。这是一个推荐列表，阅读更多部分与 fancyBox 一起出现。

...
<li>

    <!-- hidden div begin-->
    <div id="read-more-1" style="display: none;">
        <p>Intro More</p>
        <span class="source">Bob</span>
    </div>
    <!-- hidden div end-->

    <!-- displayed begin-->
    <p>Intro</p>
    <a class="fancy-monials" href="#read-more-1">Read more...</a><br />
    <span class="source">Bob</span>
    <!-- displayed begin-->

</li>
...

如果我禁用 JavaScript 并单击阅读更多链接，它只会将我带到我的主页。我期望的。

我曾尝试构建一个<noscript>块来完整地重新显示推荐，并隐藏其他推荐，但这似乎很乏味和hacky。

4

1 回答 1

1

解决此类问题的一种常见方法是向class="no-js"页面元素添加属性html，然后使用 javascript 删除此类。

然后，您可以将此类用作 CSS 中的样式挂钩，以根据是否启用 JS 来显示/隐藏内容。所以在最基本的情况下，你可以这样做（使用上面的代码）：

<html class="no-js">
    <head>
        <script type="text/javascript">
            var dde = document.documentElement;
            dde.className = dde.className.replace('no-js','js');
        </script>
        <style type="text/css">
            .no-js .read-more {
                display: block;
            }
            .js .read-more {
                display: none;
            }
        </style>
    </head>
    <body>
        <!-- ... -->
        <ul>
            <li>
                <!-- hidden div begin-->
                <div id="read-more-1" class="read-more">
                    <p>Intro More</p>
                    <span class="source">Bob</span>
                </div>
                <!-- hidden div end-->

                <!-- displayed begin-->
                <p>Intro</p>
                <a class="fancy-monials" href="#read-more-1">Read more...</a><br />
                <span class="source">Bob</span>
                <!-- displayed begin-->
            </li>
        </ul>
        <!-- ... -->
    </body>
</html>

换句话说，您使用 javascript 将no-js类更改为js，然后使用 CSS 隐藏.js .read-more但显示.no-js .read-more（或任何隐藏元素的类名）。

希望这可以帮助！

于 2013-02-22T22:06:02.240 回答