禁用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>塊，重新顯示評論全部，並隱藏其他人，但這似乎乏味和哈克。

來源

2013-02-22 nicorellius

解決此類問題的一種常用方法是向頁面的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 （或者你的隱藏元素的類名可能）。

希望這會有所幫助！

來源

2013-02-22 22:06:02 Caesar

這是一個很好的整體實施想法。我在整個網站有幾個'

禁用JavaScript時顯示隱藏內容

回答