Question

我在这个问题上搜索了一个答案，但没有找到任何对我的情况有意义的东西，所以发布新的问题......

我的索引页面上有多个产品类别div，其中的内容在点击时切换，如下所示：[Product Index] [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>

请注意，上面的HTML会从指定的“product-tiles.php”包含所有索引页面。

以下是操作切换的脚本：

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';
  }
}

在这个一般索引页面上，一切正常。但是，我也有类别的索引页面：“[Border] [2]”，“[Panel] [3]”，“[Tape Edge] [4]”等。为了打击冗余，我想要使用相同的HTML来呈现这些页面，而不是采用“简单”的方法并为各个产品索引创建新的HTML页面。

然而，对于[个别页面] [5]，我想完全消除切换，只在页面加载时显示我的产品图块。我如何重写这些页面的脚本来做到这一点？（对不起，如果这是基础，仍然是一个Javascript菜鸟。）

Answer 1

这是一个简洁的HTML / CSS技巧，您可以使用不使用javascript来使用相同的HTML页面来显示不同的信息... HTML：

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

CSS：

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

为了更好地流动和使用切换功能，只需使用<body onload="bogtoggle()">

进行调用即可

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

1 个答案: