禁用JavaScript时显示隐藏内容

问题描述：

我有一段HTML内容，当fancyBox启用JavaScript时可以查看。阅读更多链接，点击后，触发fancyBox弹出一个窗口，显示隐藏的内容。 Intro，More和Bob部分显示在fancyBox中，但首先显示Intro和Bob部分，然后单击阅读更多链接。这是一个推荐列表，阅读更多部分出现在fancyBox中。禁用JavaScript时显示隐藏内容

... 
<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>块，重新显示评论全部，并隐藏其他人，但这似乎乏味和哈克。

答

解决此类问题的一种常用方法是向页面的html元素添加class="no-js"属性，然后使用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 （或者你的隐藏元素的类名可能）。

希望这会有所帮助！

这是一个很好的整体实施想法。我在整个网站有几个'

nicorellius2013-02-22 23:10:42

禁用JavaScript时显示隐藏内容

相关推荐