Jquery 锚定链接列表在鼠标上方显示/隐藏图像

我试图列出不同客户端的a 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>

---

在链接中使用

数据客户端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();

 });

默认值
新增

$（'#clientcommissionals li'）.hide（）；
$（“#默认值”）.show（）；
$（'#clientList li a'）.mouseover（函数（）{
//获取类名
var cid=$（this）.data（'client-id'）；
$（“#默认值”）.hide（）；
$（“#客户端证明文件”#“+cid.show（）；
});
$（'#clientList li a'）.mouseout（函数（）{
//获取类名
var cid=$（this）.data（'client-id'）；
$（“#客户端证明文件#默认值”）.show（）；
$（“#客户端证明文件”#“+cid）.hide（）；
});

UPD：添加了输出函数，我想它现在可以为您工作了。

---

UPD2Added

能否将clientID存储为数据属性，然后将

href

作为URL？另一个选项是创建一个对象，该对象将URL存储为值，键是clientID。感谢您的回复。。我想你提到的数据属性概念和下面的答案是一样的？这对我来说似乎不太合适。谢谢你的回复，我似乎没有马上工作。。我想mouseout部分应该仍然在mouseover代码下面，还是？这对我来说很有意义，但当我将鼠标放在client1上时，它不会隐藏默认内容。…@Kristian.Johansen更新了我的答案。关于mouseout部件的位置-放在哪里并不重要，只是需要定义。@Kristian.Johansen UPD2有一把小提琴，对我来说很好。

<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();

 });