Question

这是我的第一个旋转木马项目，我对添加超链接到图像的正确/首选方式有疑问。这是我的项目格式（使用w3school's example）：

<div class="item"><a href="videos/Reports.mp4" target="_blank">
    <img src="graphics/reportsCarousel.png" /></a>
       <a href="videos/Reports.mp4" target="_blank"><div class="carousel-caption">
          <p>Reports</p>
       </div></a>
  </div>

注意我已将图像和标题链接在一起，因为标题div导致死点，因此只有图像的顶部和底部处于活动状态，即可点击。我尝试将标题放在图像中，但不喜欢结果。我也尝试在图像上方和下方移动标题，但标题没有显示。我真的很喜欢它的外观，但想知道是否有更好的方法来设置链接？

额外信用：此外，我想知道是否有办法使用当前的div设置并排显示两个或三个图像？当我将第二个图像放入项目div时，即使使用内联ul，图像也会垂直显示而不是水平显示。我可以使用更复杂的方法来做到这一点，但如果我可以轻松地调整这个方法，那将节省我很多时间。

Answer 1

今天我有一些时间把它放在一起。它似乎工作。

但是，我不确定它是否解决了您的问题，因为缺少[mcve]，我无法重现您的问题。

我添加了JS来将click事件记录到控制台 - 您可能会或可能不会在最终版本中使用它（再次我不确定您需要什么，因为您提供的代码不完整/可验证）

请注意

下面的可运行代码段位于一个框架内，x-frame-options设置为SAMEORIGIN，因此该链接实际上不会在这里工作（您需要复制/粘贴到您自己的页面中才能看到链接工作）

$(function() {
  $('.item').on('click', function() {
    console.log('clicked! going to: ' + $(this).find('a').attr('href'));

    window.location = $(this).find('a').attr('href');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <a href="http://google.com" target="_blank">
        <img src="http://lorempixel.com/1024/480/" />
        <div class="carousel-caption">
          <h3>caption 1</h3> 
        </div>
      </a>
    </div>

    <div class="item">
      <a href="http://google.com" target="_blank">
        <img src="http://lorempixel.com/1024/480/" />
        <div class="carousel-caption">
          <h3>caption 2</h3>

        </div>
      </a>
    </div>

    <div class="item">
      <a href="http://google.com" target="_blank">
        <img src="http://lorempixel.com/1024/480/" />
        <div class="carousel-caption">
          <h3>caption 3</h3>

        </div>
      </a>

    </div>

    <div class="item">
      <a href="http://google.com" target="_blank">
        <img src="http://lorempixel.com/1024/480/" />
        <div class="carousel-caption">
          <h3>caption 4</h3>
        </div>
      </a>
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Answer 2

不起作用。使用该代码，您将找到有史以来的第一个href。试试这个：

$(function() {
    $( ".item" ).each(function(index) {
        $(this).on("click", function() {
            console.log('clicked! going to: ' + $(this).find('a').attr('href'));
        });
    });
});

Bootstrap Carousel - 与标题的链接的图象

2 个答案: