Javascript 页面加载时显示div-抵消切换功能

我搜索了这个问题的答案，但并没有找到任何与我的情况完全相关的东西，所以发布了新的问题

在我的索引页面上有多个产品类别div，其内容在单击时切换，如下所示：[产品索引][1]

以下是基本结构：

HTML

<div id="bogtoggle">
  <h2>Swatch</h2> 
    <a onClick="toggle(this, 'node<?php echo $row_rsCategories['Category_ID']; ?>')">
      <h2>Category</h2>
        <span>Right-facing toggle arrow</span>
    </a>
  <div id="node<?php echo $row_rsCategories['Category_ID']; ?>">
    ...      
    Contents
    ...
  </div>
</div>

在这个通用索引页面上，所有操作都正常。但是，我也有一些分类的索引页：“[边框][2]，“[面板][3]，“[磁带边缘][4]”等。。为了消除冗余，我希望使用相同的HTML来呈现这些页面，而不是走“简单”的路线，为各个产品索引创建新的HTML页面

---

但是，对于[individual pages][5]，我想完全取消切换，只在页面加载时显示我的产品磁贴。我该如何重写这些页面的脚本来实现这一点？？（如果这是最基本的，很抱歉，还是有点Javascript的问题。）

这里有一个简洁的HTML/CSS技巧，你可以不用Javascript使用相同的HTML页面来显示不同的信息。。。 HTML:

---

为了更好地流动和使用切换函数，只需使用

调用它，这里有一个简洁的HTML/CSS技巧，您可以在不使用javascript的情况下使用相同的HTML页面来显示不同的信息。。。 HTML:

---

为了更好地流动和使用切换函数，只需使用

调用它，在创建切换函数后，您可以检查

document.getElementsByClassName（'category'）。length/2

-如果它是1，那么您就在特定页面上，可以立即调用

toggle（）

使用

document.getElementsByClassName（'category'）[1]

作为第一个参数（不过，函数需要稍微重写，因为您目前希望elm是

而不是

。希望这是有意义的！有两个问题。1-空的

标记是怎么回事？2-这里有与jQuery的任何连接吗？我看到的都是纯JS。对不起，超现实主义的梦想，我编辑了标记。我目前没有jQuery在函数，但我知道很多人建议使用jQuery解决方案。Smokey，当你说我应该“检查”

document.getElementsByClassName（'category'）.length/2

，这是否意味着要在

函数切换（elm，id）{

之后立即插入它？另外，很抱歉，我也无法理解你写的其他内容。：）创建切换函数后，您可以检查

document.getElementsByClassName（'category'）.length/2

-如果它是1，那么您就在特定页面上，您可以使用

document.getElementsByClassName（'category'）[1]

作为第一个参数立即调用

toggle（）

（不过，函数需要稍微重写，因为您目前希望elm是

而不是

。希望这是有意义的！有两个问题。1-空的

标记是怎么回事？2-这里有与jQuery的任何连接吗？我看到的都是纯JS。对不起，超现实主义的梦想，我编辑了标记。我目前没有jQuery在函数，但我知道很多人建议使用jQuery解决方案。Smokey，当你说我应该“检查”

document.getElementsByClassName（'category'）.length/2

，这是否意味着要在

函数切换（elm，id）{

之后立即插入它？另外，很抱歉，我也无法理解你写的其他内容。：）

function toggle(elm, id) {
  var e = document.getElementById(id),
      a = elm.getElementsByTagName('span')[0];

  if (e.style.display == 'none')
  {
    e.style.display = '';
    a.innerHTML = 'Down-facing toggle arrow';
  }
  else
  {
    e.style.display = 'none';
    a.innerHTML = 'Right-facing toggle arrow';
  }
}

<a href ="#history">History</a>

#history
{display:none;
}
#history:target
{display:block;
}