引导轮播中的 Href答案

【问题标题】：Href in Bootstrap Carousel引导轮播中的 Href
【发布时间】：2016-05-04 14:22:15
【问题描述】：

我一直在搜寻 Interwebz，但似乎找不到答案。如何在我的轮播链接中添加 href？我试图将 a 标签放在我的 h1 标签之外，但它破坏了滑块本身的功能。

这是我的代码？

<div class="col-sm-12">
  <div id="my-slider" class="carousel slide" data-ride="carousel">
    <!-- indicators dot nov -->
    <ol class="carousel-indicators">
      <li data-target="#my-slider" data-slide-to="0" class="active"></li>
      <li data-target="#my-slider" data-slide-to="1"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
          <img src="img/Internet.jpg"  alt="Internet Services" />
          <div class="carousel-caption">
            <h1 href="/Internet">Truespeed Internet Services</h1>
          </div>
      </div>
    <div class="item">
        <img src="img/HomePhone.jpg" alt="Truespeed Internet Services" />
        <div class="carousel-caption">
          <h1>Phone</h1>
        </div>
    </div>
    </div>
    <!-- Controls or next and prev buttons -->
    <a class="left carousel-control" href="#my-slider" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#my-slider" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>

  </div>
</div>

【问题讨论】：

你有小提琴吗？
只需将href="link here" 添加到您的img 标签。请参阅此 SO 帖子 stackoverflow.com/questions/18339638/…
@Pugazh 非常感谢！我不知道我怎么没找到那个链接...你能回答这个让我选择吗？

标签： html css twitter-bootstrap

【解决方案1】：

http://www.bootply.com/nZjger87Zc#

您可以在H1 标签之外添加a 标签。

【讨论】：

【解决方案2】：

只需使用href 属性将所需链接添加到img。检查下面的更新代码

<div class="col-sm-12">
  <div id="my-slider" class="carousel slide" data-ride="carousel">
    <!-- indicators dot nov -->
    <ol class="carousel-indicators">
      <li data-target="#my-slider" data-slide-to="0" class="active"></li>
      <li data-target="#my-slider" data-slide-to="1"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="img/Internet.jpg" href="http://google.com" alt="Internet Services" />
        <div class="carousel-caption">
          <h1 href="/Internet">Truespeed Internet Services</h1>
        </div>
      </div>
      <div class="item">
        <img src="img/HomePhone.jpg" href="http://google.com" alt="Truespeed Internet Services" />
        <div class="carousel-caption">
          <h1>Phone</h1>
        </div>
      </div>
    </div>
    <!-- Controls or next and prev buttons -->
    <a class="left carousel-control" href="#my-slider" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#my-slider" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>

  </div>
</div>

【讨论】：

除非有我错过的重大变化，否则 href 不属于 img 标签。