如何隐藏某些未被

发布于 2024-10-03 08:41:33 字数 933 浏览 6 评论 0原文

<html>

    <head>

        <script type="text/javascript">
         // jquery and javascript functions
        </script>

    </head>

    <body>

        <fancy-jquery-ajaxy-html-section>
        </fancy-jquery-ajaxy-html-section>

        <noscript>
        sorry you came to the wrong place - this site is all jquery/ajaxy stuff.
        </noscript>

    </body>

</html>

我尝试用 包围 但随后 即使对于启用了 JavaScript 的用户,该部分也不会显示任何内容

但我想做的是隐藏 部分仅当用户未启用 javascript 时。

它包含的内容对于没有打开 JavaScript 的人来说是无用的,因此根本不应该显示它。

禁用 JavaScript 的用户应该看到一条消息,指出没有 JavaScript 就无法查看该页面。

有办法做到吗?

<html>

    <head>

        <script type="text/javascript">
         // jquery and javascript functions
        </script>

    </head>

    <body>

        <fancy-jquery-ajaxy-html-section>
        </fancy-jquery-ajaxy-html-section>

        <noscript>
        sorry you came to the wrong place - this site is all jquery/ajaxy stuff.
        </noscript>

    </body>

</html>

I tried surrounding <fancy-jquery-ajaxy-html> with a <script type="text/javascript"></script> but then nothing from that section is displayed even for users with javascript enabled.

But what I want to do is hide that <fancy-jquery-ajax-html> section only if the user doesn't have javascript enabled.

It contains content that is useless to someone without javascript turned on, so it shouldn't be shown at all.

A user with javascript disabled should only see a message saying that the page can't be viewed without javascript.

Is there a way do that?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

不一样的天空 2024-10-10 08:41:33

最简单的方法是用 CSS 隐藏该部分(例如 display:none),然后通过 Javascript 显示它。

编辑:只是一个小例子

<div>Everyone sees this div</div>

<div id="mydiv" class="hidden">You see this div only with JS enabled</div>

<script type="text/javascript">
    $("#mydiv").removeClass("hidden");
</script>
<noscript>
    <div>You will see this div only with JS disabled</div>
</noscript> 

,当然,在你的 CSS 中:

.hidden
  {
  display: none;
  }

The easiest way is to hide the section with CSS (e.g. display:none), then show it through Javascript.

EDIT: just a little example

<div>Everyone sees this div</div>

<div id="mydiv" class="hidden">You see this div only with JS enabled</div>

<script type="text/javascript">
    $("#mydiv").removeClass("hidden");
</script>
<noscript>
    <div>You will see this div only with JS disabled</div>
</noscript> 

And, of course, in your CSS:

.hidden
  {
  display: none;
  }
故人如初 2024-10-10 08:41:33

您可以使用 css 隐藏您喜欢的部分:

<div id="fancy_jquery_ajax" style="display: none;">
</div>

然后您可以使用 JavaScript 来显示该元素:

$("#fancy_jquery_ajax").css("display", "block");

我希望这是对的,实际上我不太使用 jQuery。 :S

You could hide your fancy section using css:

<div id="fancy_jquery_ajax" style="display: none;">
</div>

then you could use use JavaScript to display the element:

$("#fancy_jquery_ajax").css("display", "block");

I hope that's right, I actually don't use jQuery that much. :S

东走西顾 2024-10-10 08:41:33

另一种方法是使用 JavaScript 生成该 HTML,因此除非 JavaScript 正在运行,否则它不会显示。

Another approach would be to generate that HTML using JavaScript, so it can't appear unless JavaScript is running.

雄赳赳气昂昂 2024-10-10 08:41:33

我所做的就是让我的 JavaScript 隐藏 nojsdiv 并显示 maindiv。这样,如果您没有 javascript,消息就会显示出来。

<body onload="allowlogin()">
    <div id="maindiv" style="visibility: hidden;">
...
    </div>
    <div id="nojsdiv">
        The training system requires javascript to be enabled.
    </div>
</body>

What I did is to have my javascript hide the nojsdiv and show maindiv. This way, if you don't have javascript the message shows up.

<body onload="allowlogin()">
    <div id="maindiv" style="visibility: hidden;">
...
    </div>
    <div id="nojsdiv">
        The training system requires javascript to be enabled.
    </div>
</body>
临走之时 2024-10-10 08:41:33

我更喜欢在 jQuery 加载后立即将 .js 类添加到 html 标记中。这允许我编写仅当用户启用/禁用 javascript 时才适用的 css 规则。这可以使您的显示和隐藏代码远离我们的 JS,并让 CSS 完成其工作并设计页面样式

以下是我解决您的问题的方法:

<html>
  <head>
    <style type="text/css">
      .js #fancy_jquery_ajax {display: none;}
    </style>
    <script type="text/javascript" src="/scripts/jquery.js"></script>
    <script type="text/javascript">
      $('html').addClass('js');
      $(document).ready(function() {
        // Stuff to do as soon as the DOM is ready
      });  
    </script>
  </head>
  <body>
      <div id = "fancy_jquery_ajax"></div>
      <noscript><!-- stuff to say if use had javascript disabled --></noscript>
  </body>
</html>

重要的是要注意我们要添加 .js 类一旦 jQuery 加载完毕,就不要将其添加到我们的 document.ready 处理程序中。否则我们就会回到原点。

I prefer to add a class of .js to html tags as soon as jQuery has loaded. This allows my to write css rules that apply only when the user has javascript enabled/disabled. This keeps your show and hide code out of our JS and lets CSS do its job and style the page

Here's how I would approach your problem:

<html>
  <head>
    <style type="text/css">
      .js #fancy_jquery_ajax {display: none;}
    </style>
    <script type="text/javascript" src="/scripts/jquery.js"></script>
    <script type="text/javascript">
      $('html').addClass('js');
      $(document).ready(function() {
        // Stuff to do as soon as the DOM is ready
      });  
    </script>
  </head>
  <body>
      <div id = "fancy_jquery_ajax"></div>
      <noscript><!-- stuff to say if use had javascript disabled --></noscript>
  </body>
</html>

It's important to note that we want to add the class of .js as soon as jQuery has loaded and not add it in our document.ready handler. Otherwise we'd be back to square one.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文