添加指向动态滑块标题的链接答案

【问题标题】：Add a link to dynamic slider caption添加指向动态滑块标题的链接
【发布时间】：2016-10-31 19:39:45
【问题描述】：

我有一个由 Amazingslider 插件创建的滑块。它工作得很好，但有没有办法为每个图像的标题添加链接（href）？我试过了，但链接没有显示在滑块标题中。

这是我的 sn-p：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://www.worldinbag.com/js/amazingslider.js"></script>
<script src="http://www.worldinbag.com/js/initslider-1.js"></script>

<div id="amazingslider-wrapper-1" style="display:block;position:relative;max-width:804px;margin:0px auto 59px; overflow:hidden;">
  <div id="amazingslider-1" style="display:block;position:relative;margin:0 auto;">
    <ul class="amazingslider-slides" style="display:none;">
      <li>
        <img src="http://uupload.ir/files/4hlh_img-10.jpg" alt="img-10" title="This is a caption This is a caption This is a caption This is a caption This is a caption " data-description="This is a caption This is a caption This is a caption This is a caption This is a caption "
        />
      </li>
      <li>
        <img src="http://uupload.ir/files/8dn2_img-11.jpg" alt="img-10" title="img-10" data-description="This is a caption" />
      </li>

    </ul>
    <ul class="amazingslider-thumbnails" style="display:none;">
      <li>
        <img src="http://uupload.ir/files/zck1_img-10-tn.jpg" alt="img-10" title="img-10" />
      </li>
      <li>
        <img src="http://uupload.ir/files/jcyq_img-11-tn.jpg" alt="img-11" title="img-11" />
      </li>

    </ul>

  </div>
</div>

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

您可以做的是在标题属性中添加一个链接标签。如果您使用单引号或转义双引号，则此方法有效：

<a href='#your-url'>your caption</a>

使用这种方法，只能插入到标题的链接，而不是链接整个标题本身。

还有一个提示：尽量不要使用内联样式，最好使用已经使用的类和 id 来应用样式。

#amazingslider-wrapper-1 {
  display: block;
  position: relative;
  max-width: 804px;
  margin: 0 auto;
  overflow: hidden;
}
#amazingslider-1 {
  display: block;
  position: relative;
  margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.worldinbag.com/js/amazingslider.js"></script>
<script src="http://www.worldinbag.com/js/initslider-1.js"></script>


<div id="amazingslider-wrapper-1">
  <div id="amazingslider-1">
    <ul class="amazingslider-slides" style="display:none;">
      <li>
        <img src="http://uupload.ir/files/4hlh_img-10.jpg" alt="img-10" title="<a href='#'>This is a link</a> This is a caption This is a caption This is a caption This is a caption " data-description="This is a caption This is a caption This is a caption This is a caption This is a caption "
        />
      </li>
      <li>
        <img src="http://uupload.ir/files/8dn2_img-11.jpg" alt="img-10" title="img-10" data-description="<a href='#'>This is a link</a>" />
      </li>

    </ul>
    <ul class="amazingslider-thumbnails" style="display:none;">
      <li>
        <img src="http://uupload.ir/files/zck1_img-10-tn.jpg" alt="img-10" title="img-10" />
      </li>
      <li>
        <img src="http://uupload.ir/files/jcyq_img-11-tn.jpg" alt="img-11" title="img-11" />
      </li>

    </ul>

  </div>
</div>

【讨论】：