Блог

Главная - Вопросы по программированию - Как заменить текст тегом ссылки при использовании .hover()?

Как заменить текст тегом ссылки при использовании .hover()?

#javascript #jquery #html #web #jquery-hover

#javascript #jquery #HTML #веб #jquery-наведите курсор

Вопрос:

Я пытаюсь создать раздел «контакты» на панели навигации веб-сайта (с помощью jQuery), который включает в себя <a>Instagram</a> и <a>Email</a> , но который появляется только при наведении курсора на #contact .

До сих пор мне удавалось отображать строки только при наведении курсора #contact .

HTML:

 <span id="contact">CONNECT</span>

jQuery:

 $("#contact").hover(function(){
  $(this).text(function(i, text){
    return text === "CONNECT" ? "Instagram | Email" : "CONNECT";
  })
});

Как я мог бы сделать так, чтобы «Instagram» и «Email» были ссылками?

Я пробовал это:

 $("#contact").hover(function(){
    $(this).text(function(i, text){
        return text === "CONNECT" ? "<a>Instagram</a> | <a>Email</a>" : "CONNECT";
    })
});

но когда я зависал, я получал "<a>Instagram</a>" и "<a>Email</a>" в виде строк, а не ссылок.

Любая помощь была бы с благодарностью принята!

Ответ №1:

Вам нужно использовать .html() для обновления, если вам нужно установить HTML вместо .text() .

 jQuery(function($) {
  $("#contact").hover(function() {
    $(this).html(function(i, text) {
      return $(this).text() === "CONNECT" ? "<a>Instagram</a> | <a>Email</a>" : "CONNECT";
    })
  });
});  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="contact">CONNECT</span>

Комментарии:

1. Вы добились эффекта наведения. Но они не отображаются как ссылки. Я думаю, пользователь хочет, чтобы они были интерактивными в качестве a тегов.

2. Добавление тега <a> делает его интерактивным, и я уверен, что OP знает, что для превращения его в ссылку он должен быть <a href =»www.link.com «>

3. Работает отлично. Огромное спасибо!

Ответ №2:

Я думаю, что хороший способ сделать это — создать два элемента ссылки и добавить их в диапазон «CONNECT» следующим образом:

 $("#contact").hover(
  function(){
    $( '#contact' ).empty();//Remove everything

    $("<a>", {
    text: 'Instagram',
    title: "Instagram",
    href: "www.instagram.com"
    }).appendTo( '#contact' );

    $("<span>", {
    text: ' | ',
    }).appendTo( '#contact' );

    $("<a>", {
    text: 'Email',
    title: "Email",
    href: "mailto:name@gmail.com"
    }).appendTo( '#contact' );  
},function(){
    $( '#contact' ).empty();//Remove everything
    $( '#contact' ).text("CONNECT");  
});  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="contact">CONNECT</span>