Valid Xhtml 1.0投機的な解析エラーのない厳密なJSトグル

トグルスクリプトがたくさんあることは知っていますが、これまでのところ私のニーズに合うものは見つかりませんでした。それは次のようになります。ブラウザの機能Valid Xhtml 1.0投機的な解析エラーのない厳密なJSトグル

有効なXHTML 1.0の厳密な有効なCSS 2.1/CSSなしで3
（ちょうど見える...ないトグル）
ドン」 tはどこからちょうどこの小さなトグル機能

のための全体scriptlibraryをロードしない投機的な解析エラー（Firefoxの/ヤモリコンソール）

可能な場合を引き起こします

投機的解析エラーは、JavaScriptセクション内で不完全なhtmlが書き込まれると発生します（例：タグは閉じられません）。私のニーズを達成するために、どのように

function toggle(ID) {  \t 
 
\t var ele = document.getElementById(ID); 
 
\t 
 
\t if(ele.style.display == "block") { 
 
\t \t \t ele.style.display = "none"; } 
 
\t else { 
 
\t \t \t ele.style.display = "block"; } 
 
}

<a href="javascript:toggle('content')">Content Toggle Linktext</a> 
 

 
<script type="text/javascript"> 
 
\t /* <![CDATA[ */ 
 
\t document.write('<div id="content" style="display:none;">'); 
 
\t /* ]]> */ 
 
</script> 
 

 
<p>Content blablabla</p> 
 

 
<script type="text/javascript"> 
 
\t /* <![CDATA[ */ 
 
\t document.write('<\/div>'); 
 
\t /* ]]> */ 
 
</script>

：

は、ロード中にコンテンツをちらつき投機的な解析エラーが発生し、これは、この例を参照してください？たぶん私は完全に新しいアプローチが必要でしょうか？ありがとう、ストーニー

出典

2016-04-05 Stony

にdocument.writeが廃止されましたこれはなぜ正確です。 'if（something）container.innerHTML =（完全なdiv）;を使うべきです。そうでなければcontainer.innerHTML =（pのみ）; 'を1つのモノリシックなJavaScriptブロックに置き換えます。 –

私はまだ試していませんが、この場合、javascriptのないユーザーのコンテンツは表示されません。スクリプト全体は実行されませんが、コンテンツはスクリプトに含まれていますか？私はJS初心者です... – Stony

とにかく_document.write_のヒントをありがとう。 – Stony

私は今自分で解決策を見つけたと思います。this blog commentこれは非常にうまく動作し、htmlを読みやすくしてくれます。スクリプトがヘッダーに読み込まれます。

/* JavaScript */ 
function toggle(ID) { 
    var ele = document.getElementById(ID); 

    if (ele.style.display === "block") { 
      ele.style.display = "none"; } 
    else { 
      ele.style.display = "block"; } 
} 

document.documentElement.className += " CssClassJsLoad"; 
// writes the classname "CssClassJsLoad" into the <html>-tag to make sure document is completely loaded by browser before parsing starts

/* CSS */ 
.CssClassJsLoad .JsHide { 
    display:none; } 
/* For all objects within both of these classes: Do not display. 
Remember: the <html>-tag only gets the class "CssClassJsLoad" if JS is present or respectively successfully executed. So if JS is not present, display will be standard as "block" element */

<!-- HTML --> 
<a id="content-link" href="javascript:toggle('content')">Content Toggle Linktext</a> 

<div class="JsHide" id="content"> 
    <p>Content Text blablabla. Inherits class "JsHide" from surrounding div and "CssClassJsLoad" from surrounding html-tag</p> 
</div>

出典

2016-04-05 18:26:15 Stony

Valid Xhtml 1.0投機的な解析エラーのない厳密なJSトグル

答えて

関連する問題