Question

我尝试使用不同的客户端创建一个href列表，然后添加与用户的交互，以便它显示来自客户端的不同图片。

脚本完成它的工作，但我想对它做一点改动。我想更改一个href，以便我可以链接到另一个页面。在这个例子中。当您将鼠标悬停在client1上时，它会显示来自client1网站的图片，如果您单击该图片，则应在新标签页中打开client1网站。

我可以使用另一个.attr并将其添加到HTML代码中吗？

我希望有人可以帮助我。

非常感谢

 <li><a href="#client1">cleint1</a></li>

    </ul></h5>

    <ul id="clientTestimonials">
        <li id="default"></li>
        <li id="client1" class="clients">
            <img src="http://blahblah.com/images/blah2.png">
        </li>
        </li>                       
    </ul>

和jquery ..

$(document).ready(function() {

       $('#clientTestimonials li').hide();
    $('#clientTestimonials #default').show();

    //attach mouseover events on links
    $('#clientList li a').mouseover(function() {
        // get the classname
        var id = $(this).attr('href');
        $('#clientTestimonials #default').hide();
        $('#clientTestimonials '+id).show();
    });

    $('#clientList li a').mouseout(function() {
        // get the classname
        var id = $(this).attr('href');
        $('#clientTestimonials #default').show();
        $('#clientTestimonials '+id).hide();

    });
});

Answer 1

在您的链接中使用data-client-id属性，例如

<ul id="clientList">
   <li><a href="#" data-client-id="client1">cleint1</a></li>
</ul>


<ul id="clientTestimonials">
   <li id="default">default</li>
   <li id="client1" class="clients">new</li>                       
</ul>




  $('#clientTestimonials li').hide();
  $('#default').show();



 $('#clientList li a').mouseover(function() {
    // get the classname
    var cid = $(this).data('client-id');
    $('#default').hide();
    $('#clientTestimonials #'+cid).show();
 });

 $('#clientList li a').mouseout(function() {
    // get the classname
    var cid = $(this).data('client-id');
    $('#clientTestimonials #default').show();
    $('#clientTestimonials #'+cid).hide();

 });

UPD：添加了功能，我想它现在适合你。 UPD2 已添加Fiddle

锚链接列表在鼠标悬停时显示/隐藏图像

1 个答案: