1

私は現在display:none、自分のWebサイトのすべてのdivを非表示にするために使用しています。ユーザーが「info」や「contact」などをクリックすると、適切なdivがJQueryを介して下にスライドします。Javascriptを使用していないユーザーをサポートするために、Javascriptが有効になっていない場合、リンクは「info.php」と「contact.php」に移動します。

変更を加えるときにメインページと非JavaScriptバージョン（info.php、contact.phpなど）の両方を更新する必要があるため、これを維持するのは非常に面倒です。

Javascriptを使用していないユーザーにとって、JQueryスライディングdivへの賢明なバックアップとは何ですか？

4

6 に答える 6

2

私があなたを正しく理解したら、静的コンテンツを含むphpファイルを作成します。（すべてのサイトのコンテンツ）および「ページ」のようなGETパラメータに応じて、別のファイルからのインクルードごとのコンテンツ（情報/連絡先）をインクルードします。

于 2013-01-24T18:10:07.450 に答える
2

<div>JavaScriptを使用していないユーザーでも<div>1つの長いページですべてのを表示できるように、jQueryでsを非表示にします。一方、JavaScriptを使用しているユーザーは、<div>通常どおりにsをスライドできます。

  • jQueryISJavaScript-バックアップ計画にすることはできません。
  • JavaScriptとjQueryという用語を単に同じ意味で使用するのではありません

jQueryはJavaScriptライブラリです。JavaScriptを無効にすると、jQueryスクリプトはsを非表示にできなくなります<div>。重要なのは、JavaScriptが利用できないときに機能を維持することです。JavaScriptがないと機能しなくなるような重要な操作をページに実行しない限り、JavaScript以外のユーザーに対応できます。この場合、変更作業をjQuery（またはJavaScript）に移すことは、機能を維持する方法です。

于 2013-01-24T18:22:47.047 に答える
1

純粋なCSSソリューション

これは状況に応じて機能する場合と機能しない場合がありますが、IE8以降のcssセレクターを使用してドロップダウンメニューの動作を実際に模倣することができます。これが例です。メニューをクリックすると、コンテンツにカーソルを合わせるとコンテンツが表示されますが、JavaScriptは必要ありません。

機能性

デフォルトでは、すべてのコンテンツが非表示になっています。ただし、：active疑似クラスのおかげで、親がクリックされたときに表示されるコンテンツを変更できます。ただし、これはかなり不便です。ユーザーが何かを表示するには、マウスを押したままにする必要があります。ただし、ユーザーがクリックしてホバーするとコンテンツが表示される：hover疑似クラスを追加することで、少しごまかすことができます。

これまでのところ、このcssがあります：

.container.content {
  display: none; 
}
.container:active .content {
  display: block;
}
.content:hover {
  display: block; 
}

ただし、これは少し不安定です。コンテンツを保持するには、コンテンツの上でマウスを下に動かす必要があり、混乱する可能性があります。ただし、コンテンツを表示よりも大きくすることで、少しごまかすことができます。これを行う簡単な方法は、パディングすることです（これは、追加した例で行ったことです）が、これにより、奇妙なリフローの問題が発生する可能性があります。私が思うより良い方法は、フローを変更せずにコンテンツのサイズを追加する意図的な間隔divを追加することです。

これを追加すると

<div style="position:absolute; top:-50px; height: 50px; width: 100%;"></div>

コンテンツの先頭まで、メニューの上にホバーしている非表示のdivがあります。これにより、ホバーが機能する領域が拡張されます。同様のことを下部でも行うことができ、ホバー領域が大きく、メインコンテンツを超えるリフローをトリガーしないソリューションが残ります。

残りの問題

とにかく、これは確かにjavascriptほど柔軟ではないため、完璧ではありません。スライドはなく、ユーザーがマウスを外した場合にコンテンツを確実に表示させることはできません。

他の人が示唆しているように、ユーザーがそれを有効にした場合でも、事後にjavascriptを使用してこれを改善することができます-これは、noscriptユーザーへの適切なバックアップとして引き続き機能します。

于 2013-01-24T18:31:23.860 に答える
1

to_hide最初に、 javascriptがアクティブ化されたときに非表示にする必要があるすべてのdivにクラスを追加します。

最も簡単な方法は、ページの読み込み時に次のようにdivを非表示にすることです。

$(document).ready(function() {
    $('.to_hide').hide();
});

これを行うと、ロード時にレイアウトが点滅することに注意してください（最初にコンテンツ全体が表示され、次に動的divが非表示になります）。

点滅を避けるために、to_hideクラスのcssルールを動的に追加できます。<head>これを行うには、で次の関数を使用します。

function dyn_css_rule(sSelector, sCssText) {
    try {
        var aSS = document.styleSheets;
        var i;
        for (i=aSS.length-1; i>=0; i--) {
            var oCss = document.styleSheets[i];
            var sMedia = (typeof(oCss.media) == "string")?
                oCss.media:
                oCss.media.mediaText;
            if (!sMedia
                || sMedia.indexOf("screen") != -1
                || sMedia.indexOf("all") != -1
            ) {
                break;
            }
        }
        if (oCss.insertRule) {
            oCss.insertRule(sSelector + " {" + sCssText + "}", oCss.cssRules.length);
        } else if (oCss.addRule) {
            oCss.addRule(sSelector, sCssText);
        }
    } catch(err) {
        var tag = document.createElement('style');
        tag.type = 'text/css'; 
        try {
            tag.innerHTML = sSelector + " {" + sCssText + "}";
        } catch(err) {
            tag.innerText = sSelector + " {" + sCssText + "}";
        }
        document.getElementsByTagName('head')[0].appendChild(tag);
    }
    return sSelector + "{" + sCssText + "}";
};

dyn_css_rule('.to_hide', 'display: none');
于 2013-01-24T18:27:20.350 に答える
1

info.phpのメインテキストをインクルードファイルに入れます。info.inc.phpとしましょう

js以外のユーザーがリンクをクリックすると、インクルードファイルがインクルードされているinfo.phpに移動します。

ただし、jsユーザーがリンクをクリックすると、info.inc.phpがdivに読み込まれ、jqueryで表示されます。

言う

$('a.info').click(function(e){
    e.preventDefault();
    $('#infoDiv').load('info.inc.php')
                .show();
    return false;
});

コンテンツを更新する必要がある場合は、インクルードファイルを更新するだけです。

于 2013-01-24T18:22:44.327 に答える
1

私はAntonyの答えとこの答えを組み合わせたソリューションを使用することになりました：https ：//stackoverflow.com/a/8928909/1342461

<html class="no-js">
<body>
<div id="foo"></div>
</body>
</html>

#foo
{
    display: none;
}

html.no-js #foo
{
    display: block;
}

$(document).ready(
   function()
   {
     $('html').removeClass('no-js');
   }
);

すべてのdivは、javascriptを持たない人に表示されます。次に、ナビゲーションリンクをa href="#info"、たとえば、JavaScriptユーザーに対して「slide.down（）」などを実行しながら、JavaScript以外のユーザーに対して正しいdivまでスクロールダウンするように設定できます。

于 2013-01-24T21:11:49.603 に答える