0

私は、fancyBox で JavaScript が有効になっているときに表示できる HTML のコンテンツのチャンクを持っています。[続きを読む] リンクをクリックすると、fancyBox がトリガーされ、非表示のコンテンツを表示するウィンドウがポップアップ表示されます。fancyBox には Intro、More、Bob のパーツが表示されますが、Intro と Bob のパーツが先に表示されてから、リンクされている read more をクリックします。これは、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>、証言を完全に再表示し、他のものを非表示にするブロックを構築することをいじりましたが、それは退屈でハッキーに思えます.

4

1 に答える 1

1

この種の問題を解決する一般的な方法の 1 つはclass="no-js"、ページの要素に属性を追加してから、 htmljavascript を使用してこのクラスを削除することです。

次に、このクラスを 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 に答える