Question

我正在将手风琴用于自定义WP主题。如果用户单击，则手风琴的结构允许显示或隐藏特定部分：

代码：

<div class="col-md-3 accordion md-accordion" id="accordionEx" role="tablist" aria-multiselectable="true">
  <!-- Accordion card -->
  <div class="card">

    <!-- Card header -->
    <div class="card-header" role="tab" id="headingOne1">
      <a data-toggle="collapse" data-parent="#accordionEx" href="#collapseOne1" aria-expanded="true" aria-controls="collapseOne1">
        <!-- Collection card -->
        <div class="card collection-card z-depth-1-half">
          <!-- Card image -->
          <div class="view zoom">
            <img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/5.jpg" class="img-fluid" alt="">
            <div class="stripe dark">
              <p>Red trousers
                <i class="fas fa-angle-right"></i>
              </p>
            </div>
          </div>
        </div>
      </a>
      <!-- Card image -->
    </div>
    <!-- Collection card -->
  </div>
</div>
<!-- Accordion card -->
</div>

部分显示/隐藏：

<div class="col-md-12 accordion md-accordion" id="accordionEx" role="tablist" aria-multiselectable="true">
  <a name="collapseOne1"></a>
  <!-- Accordion card -->
  <div class="card">
    <!-- Card body -->
    <div id="collapseOne1" class="collapse" role="tabpanel" aria-labelledby="headingOne1" data-parent="#accordionEx">
      <div class="card-body">
        bla bla bla
      </div>
    </div>
  </div>
  <!-- Accordion card -->
</div>

到目前为止没有问题。但是现在我的问题是，想象我有一个像这样的网格：

container
row
col-md-3

如果在桌面上可以完美地看到4个手风琴，但是当导航移动时，它们显然是重叠的。

这给我带来了糟糕的用户体验，因为用户不了解，并且单击下面的第一个手风琴显示了移动中的显示/隐藏，但是他不知道。这就是为什么我想要实现一个简单的锚点<a>。

<a href="#C4">See also Chapter 4</a>

和

<a name="C4">Chapter 4</a>

但对于我来说，如果我实施了

<a name="collapseOne1"></a>

我只有显示和隐藏但没有锚点，我怎么能同时拥有这两个？

Answer 1

带有“＃”的链接引用了一个ID。

如果您希望您的<a name="collapseOne1"></a>也被引用为#C4，请执行以下操作：

<a href="#C4">go to Chapter 4</a>

<a id="C4" name="collapseOne1">Chapter 4</a>

希望这会有所帮助！

锚标记<a>不是锚

1 个答案: