анкер список ссылок показать/скрыть изображение на mouseover

Question

Я пытаюсь составить список href с разными клиентами, а затем добавить взаимодействие с пользователем, чтобы он показывал разные фотографии от клиентов.

Сценарий выполняет свою работу, но я хочу немного изменить его. Я хочу изменить href, чтобы я мог ссылаться на другую страницу. В этом примере. Когда вы накладываете mouseView 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: Добавленная функция, я полагаю, она будет работать для вас сейчас. UPD2Fiddle