当前位置：文江博客话题详情

如何使用 CSS 一次显示和隐藏多个元素？

发布于 2024-12-05 04:49:47 字数 362 浏览 1 评论 0原文

我找到了这篇文章这看起来正是我想要的，但我似乎根本无法让它工作。由于它已经存在一年多了，我想也许有些东西已经改变了，或者现在可能有一种更简单的方法来做到这一点。

也就是说，我无法使上面链接的方法起作用。我完全复制并粘贴，并使用因为我不确定 $(document).ready(function ()...不幸的是，我本来应该去的，我对 Javascript 很不熟悉。

原文

分享到QQ

分享到微博

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

发布评论

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

只是偏爱你 2024-12-12 04:49:47

使用这样的东西；

<script>

  $(document).ready(function(){
    //Code goes in here.
  });

</script>

从 http://jquery.com/ 加载 jQuery 库。

不要忘记同时想要阅读选择器。

使用 $("#myElement") 将选择 id 为“myElement”的元素。

使用 $(".myElement") 将选择具有“myElement”类的元素。

所以;

<div class="hideMe">Content</div>
<div class="hideMe">Content</div>
<div class="hideMe">Content</div>
<div class="doNotHideMe">Content</div>

<input type="button" class="ClickMe" value="click me"/>

<script>

  $(function(){
    $(".ClickMe").click(function(){
      $(".hideMe").hide(250);
    });
  });

</script>

编辑

如果你想在线链接到 jquery 库，那么使用；

<script src="http://code.jquery.com/jquery-1.6.1.min.js" type="text/javascript"></script>

如果您下载该库并将 js 文件插入到您的项目中，然后使用；

<script src="/yourPathToTheLibrary/jquery-1.6.1.min.js" type="text/javascript"></script>

Use something like this;

<script>

  $(document).ready(function(){
    //Code goes in here.
  });

</script>

Don't forget to load the jQuery library at the same time from http://jquery.com/

Also, you are going to want to read up on selectors.

Using $("#myElement") will select elements that have an id of "myElement".

Using $(".myElement") will select elements that have a class of "myElement".

So;

<div class="hideMe">Content</div>
<div class="hideMe">Content</div>
<div class="hideMe">Content</div>
<div class="doNotHideMe">Content</div>

<input type="button" class="ClickMe" value="click me"/>

<script>

  $(function(){
    $(".ClickMe").click(function(){
      $(".hideMe").hide(250);
    });
  });

</script>

edit

If you want to link to the jquery library online then use;

<script src="http://code.jquery.com/jquery-1.6.1.min.js" type="text/javascript"></script>

If you download the library and insert the js file into your project then use;

<script src="/yourPathToTheLibrary/jquery-1.6.1.min.js" type="text/javascript"></script>

回复收藏 0 原文

七颜 2024-12-12 04:49:47

$ 语法是 jQuery 的一部分。如果您希望在代码中的某个位置使用 jQuery，请使用脚本标记，如您的帖子中所示：

<script>
    $(function() {
        $('.selector').hide(250);
    });
</script>

如果您想要纯 JavaScript，则需要更多的开销。不包括文档准备好的东西（这可能需要很多额外的代码才能正确完成......参见示例：此处）。

<script>
    elements = document.querySelectorAll('.selector');

    for(int i=0,len=elements.length;i<len;++i) {
        elements[i].style.display = 'none';
    }
</script>

如果您愿意，可以将其放入函数中。要显示元素，请将显示属性设置为 ''。

The $ syntax is all part of jQuery. If you wish to use jQuery then somewhere in your code, use a script tag as in your post:

<script>
    $(function() {
        $('.selector').hide(250);
    });
</script>

If you want pure JavaScript, then there is a little more overhead. Not including the document ready stuff (which can be a lot of extra code to do it right...See example: here).

<script>
    elements = document.querySelectorAll('.selector');

    for(int i=0,len=elements.length;i<len;++i) {
        elements[i].style.display = 'none';
    }
</script>

You can put that in a function if you would like. To show the elements set the display attribute to ''.

回复收藏 0 原文

~没有更多了~