Question

我需要一点帮助以获得一点指导。我的下面的文本包含5组文本，每组都有翻转文本。对于前“活动”当用户滚动它时，他们会看到文本“所有项目的活动列表”，“活动”一词应该有一个链接，但它对我不起作用。我有一个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。

jquery超链接和鼠标悬停文本 - 超链接无法正常工作

1 个答案: