Question

抱歉，我之前尝试过这个问题并没有取得好成绩，所以这里再试一次。我尝试过很多东西但仍然没有取得任何好成绩。

代码在这里 - ＆gt;的 PasteBin

我想为ninja滑块的数据图像添加超链接。我之前从未遇到过数据图像，但我不能使用img src =“＃”因为如果你们需要更多信息，那么这与javascript不兼容，请告诉我。这让我疯了！

  <div id='ninja-slider'>
                 <ul>
                     <li>
                        <div data-image="images/md/1.jpg"> </div>
                     </li>
                     <li>
                         <div data-image="images/md/2.jpg"> </div>
                     </li>
                     <li>
                         <div data-image="images/md/3.jpg"></div>
                     </li>
                     <li>
                         <div data-image="images/md/4.jpg"></div>
                     </li>
                 </ul>
             </div>

这是一个麻烦的部分。

Answer 1

只需将<div>括在<a>标记内即可。这样<div>在技术上就是链接。

＆＃13;

<div id='ninja-slider'>
  <ul>
    <li>
      <a href="images/md/1.jpg">
        <div data-image="images/md/1.jpg"></div>
      </a>
    </li>
    <li>
      <a href="images/md/2.jpg">
        <div data-image="images/md/2.jpg"></div>
      </a>
    </li>
    <li>
      <a href="images/md/3.jpg">
        <div data-image="images/md/3.jpg"></div>
      </a>
    </li>
    <li>
      <a href="images/md/4.jpg">
        <div data-image="images/md/4.jpg"></div>
      </a>
    </li>
  </ul>
</div>

＆＃13;

Answer 2

您可以使用java脚本添加链接

示例：

 <div onclick="javascript:location.href='http://www.google.com/'" data-image="images/md/1.jpg"> </div>

您也可以使用css更改指针

 #ninja-slider ul li div{
cursor:pointer;
}

谢谢..

Answer 3

尝试使用：

<div onclick="location.href='http://www.example.com';" />

或者改用span或标签

<style type="text/css">
.myspan {
    display: block;
}
</style>
<a href="#"><span class="myspan">text</span></a>

CSS3如何添加到<div data-image =“＃”> </div>的超链接

3 个答案: