Question

我有一大堆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>区块，完全重新显示了推荐书，并隐藏了其他人，但这看起来很单调乏味。

Answer 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（或隐藏元素的任何内容）类名可能是）。

希望这有帮助！

禁用JavaScript时显示隐藏的内容

1 个答案: