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

Question

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

脚本完成了它的工作，但我想对其进行一些更改。我想更改 a 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