Question

我知道那里有大量的切换脚本，但到目前为止我找不到任何适合我的需求。它应该是：

有效的xhtml 1.0严格
有效的css 2.1 /适用于没有css 3的浏览器
对于没有javascript的用户可见（只是可见...没有切换）
不会导致推测性解析错误（firefox / gecko console）
如果可能的话，不要从某个地方加载一个完整的脚本库，只是为了这个微小的切换功能

在JavaScript部分中编写了一些不完整的html（例如标记未关闭）时会发生推测性解析错误。

请参阅此示例，该示例在加载时会导致推测性解析错误和闪烁内容：

＆＃13;

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

＆＃13;

<a href="javascript:toggle('content')">Content Toggle Linktext</a>

<script type="text/javascript">
	/* <![CDATA[ */
	document.write('<div id="content" style="display:none;">');
	/* ]]> */
</script>

<p>Content blablabla</p>

<script type="text/javascript">
	/* <![CDATA[ */
	document.write('<\/div>');
	/* ]]> */
</script>

＆＃13;

那么如何实现我的需求呢？也许我需要一种全新的方法？谢谢，Stony

Answer 1

好的，我想我自己在this blog comment找到了一个解决方案，目前效果非常好，使得html更容易阅读。该脚本将加载到标题中。

<nav class="navbar">
  <div class="container-fluid">
    <div class="navbar-header navbar-default">
      <button class="navbar-toggle collapsed" type="button" data-target="#menu" data-toggle="collapse">
        <span class="sr-only">Toggle navigation</span>
      </button>
      <div>
        <a class="mybtn btn btn-link btn-xs" href="/home"><i class="fa fa-arrow-circle-o-left" style="font-size:2.5rem;"></i></a>
        <div class="navbar-brand">Hello</div>
      </div>
    </div>
  </div>           
</nav>

<nav class="navbar">
  <div class="container-fluid">
    <div class=" navbar-header navbar-default">
      <button class="navbar-toggle collapsed" type="button" data-target="#menu" data-toggle="collapse">
        <span class="sr-only">Toggle navigation</span>
      </button>
      <div class="mycontainer">
        <a class="mybtn2 btn btn-link btn-xs" href="/home"><i class="fa fa-arrow-circle-o-left" style="font-size:2.5rem;"></i></a>
        <div class="navbar-brand">Hello</div>
      </div>
    </div>
  </div>           
</nav>

.mybtn{float:left;padding:15px;display:inline-block;}

.mycontainer{display:flex;align-items:center;}

/* 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

有效的xhtml 1.0严格JS切换，没有推测性解析错误

1 个答案: