Question

我的页面上有2个div，如果禁用javascript则应显示一个div，如果未禁用javascript则应显示另一个div。

我的问题是：即使未禁用javascript，也会短暂显示包含禁用javascript消息的div，并且它在页面加载后隐藏了几秒钟。

这是我的html（简化版）：

<html>
    <head>
    <body>
    <!-- This div is displayed only if the JavaScript is DISABLED -->       
    <div class="wrapper-page" id="no-js">
        <p class="text-muted m-b-0 font-13 m-t-20" style="color:red !important;font-weight: bold;">
JavaScript has been disabled message.....
        </p>
    </div>
    <!-- end no-js div -->
    <!-- This div is hidden by default, and is displayed only if the JavaScript is ENABLED -->
    <div class="wrapper-page" id="wrapper-page" style="display:none;">
        <p>My regular content goes here...</p>
    </div>
    <!-- end wrapper page -->
    <script src="<?php echo base_url(); ?>backOffice/assets/js/jquery.min.js"></script>
    <!-- If JavaScrpt is disabled, then the main div remain not visible and only the div with the 
         Disabled JavaScript error message is displayed. -->
    <script src="<?php echo base_url(); ?>backOffice/assets/js/disabledjs.js"></script>
    </body>
</html>

以下是JavaScript文件的内容：

$(document).ready(function () {
    $("#no-js").hide();
    $("#no-js").css('visibility','hidden');
    $("#no-js").css('display','none');
    $("#wrapper-page").css("display", "block");
});

我试图将JS和jQuery移到顶部，我试图切换html div的顺序，到目前为止没有任何帮助我。

Answer 1

仅当js被禁用时才使用 noscript 标记显示内容

<html>
    <head>
    <body>
    <!-- This div is displayed only if the JavaScript is DISABLED -->
    <noscript>       
        <div class="wrapper-page">
            <p class="text-muted m-b-0 font-13 m-t-20" style="color:red !important;font-weight: bold;">
JavaScript has been disabled message.....
            </p>
        </div>
    </noscript>
    <!-- end no-js div -->
    <!-- This div is hidden by default, and is displayed only if the JavaScript is ENABLED -->
    <div class="wrapper-page" id="wrapper-page" style="display:none;">
        <p>My regular content goes here...</p>
    </div>
    <!-- end wrapper page -->
    <script src="<?php echo base_url(); ?>backOffice/assets/js/jquery.min.js"></script>
    <!-- If JavaScrpt is disabled, then the main div remain not visible and only the div with the 
         Disabled JavaScript error message is displayed. -->
    <script src="<?php echo base_url(); ?>backOffice/assets/js/disabledjs.js"></script>
    </body>
</html>

Answer 2

我会使用waldemarle的答案中所述的noscript标签，但这里有另一种选择：

使用document.write，你可以在我的身体内容周围放置一个容器div和一类js，然后你可以从头开始设置js的东西，而不会“闪烁”：

.js .no-js,
.js-show {display:none;}
.js .js-show {display:block;}

<script>
  document.write('<div class="js">'); // goes after start body tag
</script>

    <div class="no-js">hide if js enabled</div>
    <div class="js-show">hide if js disabled</div>

<script>
  document.write('</div>'); // goes before end body tag
</script>

Answer 3

您的代码运行正常。查看以下代码

		$("#no-js").hide();
    $("#no-js").css('visibility','hidden');
    $("#no-js").css('display','none');
    $("#wrapper-page").css("display", "block");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- This div is displayed only if the JavaScript is DISABLED -->       
    <div class="wrapper-page" id="no-js">
        <p class="text-muted m-b-0 font-13 m-t-20" style="color:red !important;font-weight: bold;">
JavaScript has been disabled message.....
        </p>
    </div>
    <!-- end no-js div -->
    <!-- This div is hidden by default, and is displayed only if the JavaScript is ENABLED -->
    <div class="wrapper-page" id="wrapper-page" style="display:none;">
        <p>My regular content goes here...</p>
    </div>
    <!-- end wrapper page -->

控制台中是否显示任何问题。

通过验证源代码，查看用于javascript文件的文件路径是否正确。

Answer 4

尝试这样的事情

<div id="content">
  Javascript is enabled
</div>

<noscript>
  <div>
    Javascript is disabled
  </div>
</noscirpt>

<script>
   $("#content").show();
</script>

noscript标签已经存在，只要我记得。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript

隐藏的div简要显示 - 如何防止这种情况发生？

4 个答案: