자바 스크립트가 비활성화되었을 때 숨겨진 내용 표시

HTML의 내용물이 있는데, fancyBox로 JavaScript를 활성화하면 볼 수 있습니다. 추가 링크를 클릭하면 클릭하면 fancyBox가 숨겨진 콘텐츠를 보여주는 창을 팝업합니다. Intro, More 및 Bob 파트는 fancyBox에 표시되지만, 더 자세히 링크 된 읽기 전에 클릭하면 Intro 및 Bob 파트가 먼저 표시됩니다. 그것은 fancyBox와 함께 나타나는 더 많은 섹션을 읽은 회원 평가 목록입니다.자바 스크립트가 비활성화되었을 때 숨겨진 내용 표시

... 
<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>

을, 당신은 .js .read-more을 숨기기 위해 CSS를 사용하여 다음 js에 no-js 클래스를 변경하고, 자바 스크립트를 사용하지만 .no-js .read-more을 보여 (또는 숨겨진 요소의 클래스 이름이 무엇이든간에).

희망이 도움이됩니다.

출처

2013-02-22 22:06:02 Caesar

전체 구현 아이디어가 좋습니다. 사이트 전체에 여러 개의 '

자바 스크립트가 비활성화되었을 때 숨겨진 내용 표시

답변