jquery超链接和鼠标悬停文本 - 超链接不起作用

Question

我需要一些帮助以获得一些指导。 我的文字下面有5组文字，每个文字都有滚动文字。前者;当用户翻看它时，他们看到文字“Active List of all items”，“Active”这个词应该有一个链接，但它不适合我。我有一个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; 
}; 

如果你打算让它运行它你不需要点击事件处理默认的onclick功能。删除它，它会工作。

如果你做了很多这样的事情，我强烈建议使用jQuery。您将问题标记为“jQuery”，但您的javascript中没有jQuery。假如你使用jQuery的整个鼠标悬停功能，也可以写成这样：

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

在本小提琴：http://jsfiddle.net/fb9uummr/

仅供参考 - @Praguian是正确的。您的html无效，因为您已在同一个文档中多次使用'theTog'ID。