锚标记<a>不是锚

时间:2019-09-14 17:40:22

标签: html

我正在将手风琴用于自定义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>

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

1 个答案:

答案 0 :(得分:0)

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

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

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

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

希望这会有所帮助!