Javascript 同时显示/隐藏多个div

我希望允许用户查看文章的内容或仅查看列表。但是，当我尝试此操作时，它仅隐藏第一个实例：

HTML

标题
废话废话
标题2
2.废话废话
标题3
3.废话废话
... 等10篇文章

Javascript-so-chage选项

    <a href="#" onClick="document.getElementById('articlebody').style.display='none';">View title list only</a>
    <a href="#" onClick="document.getElementById('articlebody').style.display='block';">View the whole body</a>

---

正如我所说，代码将隐藏文章正文1，但不会隐藏其余部分。

不能有两个或更多具有相同ID的元素，这是无效的HTML

我的建议是将这些更改为类，并使用jQuery隐藏/显示：

<div class="title">Title</div>
<div class="articlebody">Blah blah blah</div>
<div class="title">Title 2</div>
<div class="articlebody">2. Blah blah blah</div>
<div class="title">Title 3</div>
<div class="articlebody">3. Blah blah blah</div>

<a href="#" onClick="$('.articlebody').hide(); return false;">View title list only</a>
<a href="#" onClick="$('.articlebody').show(); return false;">View the whole body</a>

---

ID不适用于多个实例，您需要使用一个类来隐藏它们，或者设置单独的ID并单独隐藏它们

您的html有一些大问题：

第一：

id

-属性在整个文档中必须是唯一的。因此，

getElementById

只返回一个值（在文档中找到的第一个元素）

改用

class

和相应的选择器

getElementsByClassName

第二：在onclick中使用外部函数

---

，因为IE8+支持它，而IE8不支持
getElementsByClassName
。此外，它更接近jQuery语法，因此大多数webdev人员都更熟悉它；）
 在html中不能有多个具有相同id的元素！这可以通过将所有内容放入包装器元素并隐藏该元素，或者使用类和选择器（如jQuery
$（'.myclass'）.hide（）中的类和选择器）轻松实现
您无法可靠地重用
id
s

相反，使用
class
名称，或者通过标记名获取div元素

document.getElementsByClassName（“项目”）

document.getElementsByTagName（“div”）
不要这样使用id！只有一个元素可以具有相同的id！你需要的是上课。您可以使用jQuery来显示/隐藏元素。我已经尝试过类仍然以相同的方式发生，“id”必须是唯一的，因此您最好使用“Class”。不支持getElementsByClassNameeverywhere@user1150525我也这么认为，尽管它在过去几个月里得到了很多支持。即使是最新版本的IE也支持它。但是，如果这是一个主要问题，
getElementsByTagName
会更安全。这是一件好事。我没有使用它，但因为我担心它没有得到很好的支持。
<div class="title">Title</div>
<div class="articlebody">Blah blah blah</div>
<div class="title">Title 2</div>
<div class="articlebody">2. Blah blah blah</div>
<div class="title">Title 3</div>
<div class="articlebody">3. Blah blah blah</div>

<a href="#" onClick="$('.articlebody').hide(); return false;">View title list only</a>
<a href="#" onClick="$('.articlebody').show(); return false;">View the whole body</a>

<div class="title">Title</div>
<div class="articlebody">Blah blah blah</div>
<div class="title">Title 2</div>
<div class="articlebody">2. Blah blah blah</div>
<div class="title">Title 3</div>
<div class="articlebody">3. Blah blah blah</div>

<a href="#" class="viewTitleListOnly">View title list only</a>
<a href="#" class="viewWholeBody">View the whole body</a>

<script type="text/javascript">
    $(function(){
        $(".viewTitleListOnly").click(function(e){
           e.preventDefault(); //Prevents browser adding hash tag to URL
           $(".articlebody").hide();
        });
        $(".viewWholeBody").click(function(e){
           e.preventDefault(); //Prevents browser adding hash tag to URL
           $(".articlebody").show();
        });
    });
</script>

function yourfunction(){
   var el = document.getElementsByClassName(<yourclassname>);
   for (var i = 0; i < el.length; i++){
         el[i].style.display='none';
   }
}