jQuery Гиперссылка и текст на клавиатуре - Гиперссылка не работает

Question

Мне нужна небольшая помощь для небольшого руководства. В моем тексте ниже из 5 наборов текста есть текст опрокидывания. Для ex; «Активно», когда пользователь просматривает это, они видят текст «Активный список всех элементов». Слово «Актив» должно иметь ссылку, но оно не работает для меня. У меня есть href, но он не используется для ссылки.

Может больше помочь?

<!-- HIDE FROM OLD BROWSERS 
 
/* <![CDATA[ */ 
 

 
var oVTog = { 
 
toggle: function (el) { 
 
    var container = el.parentNode; 
 
    var para = container.getElementsByTagName('p')[0]; 
 
    para.style.display = "none"; 
 
    el.onmouseover = function() { 
 
    para.style.display = ''; 
 
     return false; 
 
    }; 
 
    el.onmouseout = function() { 
 
    para.style.display = 'none'; 
 
    return false; 
 
    }; 
 
    el.onclick = function() { 
 
    para.style.display = para.style.display == 'none' ? '' : 'none'; 
 
    return false; 
 
    }; 
 
    } 
 
}; 
 
window.onload = function() { 
 
    var l = document.getElementById('togTrigger'); 
 
    oVTog.toggle(l); 
 
    l = document.getElementById('togTrigger2'); 
 
    oVTog.toggle(l); 
 
    l = document.getElementById('togTrigger3'); 
 
    oVTog.toggle(l); 
 
    l = document.getElementById('togTrigger4'); 
 
    oVTog.toggle(l); 
 
    l = document.getElementById('togTrigger5'); 
 
    oVTog.toggle(l); 
 
}; 
 

 
/* ]]> */ 
 
//END HIDING -->

<!--DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"--><title>Hide/Show</title><style type="text/css"> 
 
a 
 
{ 
 
text-decoration: none; 
 
outline: none; 
 
} 
 
div#page { 
 
    margin: 10px auto; 
 
    border: 1px solid #dedede; 
 
    width: 910px; 
 
} 
 
.TogWrap { 
 
    width: 160px; 
 
    padding: 1px; 
 
} 
 
.togTrigger { 
 
    border: 0px solid #bebebe; 
 
    padding: 5px 8px; 
 
    background: #; 
 
    color: #4540ea; 
 
} 
 
.togContent { 
 
    margin-top: 10px; 
 
    border: 1px #d3f3ff; 
 
    padding: 5px 5px 5px 5px; 
 
    background: #e3f1f6; 
 
} 
 

 
</style><script type="text/javascript"> 
 

 
</script> 
 
    <table> 
 
     <tbody> 
 
     <tr> 
 
      <th> 
 
       <div class="TogWrap" id="theTog"> 
 
        <a class="togTrigger" id="togTrigger" href="http://stackoverflow.com/">Active</a> 
 
        <p class="togContent" style="display: none;"> This list contains claimed and unclaimed submissions. </p> 
 
       </div> 
 
      </th> 
 
      <th> 
 
       <div class="TogWrap" id="theTog"> 
 
        <a class="togTrigger" id="togTrigger2" href="www.google.com">All (Without Attachments)</a> 
 
        <p class="togContent" style="display: none;"> Contains all active submissions. </p> 
 
       </div> 
 
      </th> 
 
      <th> 
 
       <div class="TogWrap" id="theTog"> 
 
        <a class="togTrigger" id="togTrigger3" href="http://stackoverflow.com/">Email Attachments</a> 
 
        <p class="togContent" style="display: none;"> All attchments to submissions </p> 
 
       </div> 
 
      </th> 
 
      <th> 
 
       <div class="TogWrap" id="theTog"> 
 
        <a class="togTrigger" id="togTrigger4" href="/sites/pm/CS_Submissions/CS_Submissions_Inbox/Forms/www.google.com">Returned Submissions</a> 
 
        <p class="togContent" style="display: none;"> All Submissions that have been reviewed and returned for additional information. </p> 
 
       </div> 
 
      </th> 
 
      <th> 
 
       <div class="TogWrap" id="theTog"> 
 
        <a class="togTrigger" id="togTrigger5" href="/sites/pm/CS_Submissions/CS_Submissions_Inbox/Forms/www.google.com">Logged into CS Tracker</a> 
 
        <p class="togContent" style="display: none;"> All Submssions that have been entered into CS Tracker. </p> 
 
       </div> 
 
      </th> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
     
 
    ​

Answer 1

Проблема с этой частью вашей функции «тумблер»:

el.onclick = function() { 
    para.style.display = para.style.display == 'none' ? '' : 'none'; 
    return false; 
}; 

Вам не нужно обработчик события клика, если вы собираетесь, чтобы его запустить его default onclick. Удалите это, и он будет работать.

Если вы делаете много такого, я настоятельно рекомендую использовать jQuery. Вы отметили вопрос как «jQuery», но jQuery в javascript отсутствует. Если бы вы использовали JQuery вся функциональность Mouseover могла быть написана так:

$(function(){ 
    $('.togTrigger').hover(function(){ 
    $(this).parent().find('.togContent').show(); 
    }, function(){ 
     $(this).parent().find('.togContent').hide(); 
    }); 
}); 

как в этом скрипку: http://jsfiddle.net/fb9uummr/

FYI - @Praguian правильно. Ваш html недействителен, поскольку вы использовали идентификатор «theTog» несколько раз в одном документе.