0

潜伏了一段时间，但这是我的第一篇文章。请对我放轻松！:-)

我在表格中设置了一个带有“内容”列表的常见问题解答页面，当单击“显示”按钮时，正文变得可见。

当 display:none tr 通过单击“show”按钮更改为 display:block 时，它可以工作，除非我<a href...>在 tr 的内容中有 a。在这种情况下，除非我尝试突出显示该行，否则该链接是不可见的。

JS 看起来像这样 - 

<script> 
    function hidetr(tr) {  
        document.getElementById(tr).style.display="none"; 
    }

    function showtr(tr) {  
        document.getElementById(tr).style.display="block"; 
    } 
</script>

HTML 看起来像这样：

<tr>
    <th>I want to search for registrations in a certain area/by a certain date/by some other criteria that the site does not 
    allow?<button onclick="showtr('faq5')">Show!</button></th>
</tr>
<tr id="faq5" style="display:none"  >
    <td>Please <a href="contactus.php" >Contact Us</a> with a summary of your requirements and purpose and if we are able to help we will do. 
    At this time the search criteria on the site are purposefully limited. </td>
    <td><button onclick="hidetr('faq5')">hide!</button>

有任何想法吗？

更新
考虑到了 Lister 先生的建议，即从我想要隐藏/显示的行中删除样式 - 基本上链接仍然不可见。

我已将页面和 CSS 文档放在我的桌面上并从那里加载页面，因为我认为它可能正在从 CSS 中拉下一些东西。

该链接正确显示，除了保存文件的位置之外没有任何更改！

现在我真的很困惑

更新

排序！嗯......还没有，但我知道它是什么所以应该只需要几分钟。

在那个主页上，我有几个 PHP 包含的其他文档，包括我的导航栏，其中包含一些样式标记。那里有一个 {color: white;} 导致这个链接也是白色的。

我发现如果我将页面更改为 HTML 而不是 PHP，那么颜色是正确的，所以我认为它一定是从服务器端包含的东西。

感谢大家的评论，他们确实帮助了我 1/ 整理了一些代码 2/ 为我指明了正确的方向。

特别感谢李斯特先生。

请有人可以关闭这个。它不会让我回答我自己的问题，因为我是 7 小时的新手。

4

3 回答 3

1

好的，我重新创建了您的情况，并在 TR 中使用 DIV 并使用 CSS 类名隐藏/显示该 DIV，而不是整个 TR：

CSS

div.hidden{
 display: none;
}
div.normal{
 display: block;
}

JS

function showtr(tr){
 document.getElementById(tr).className = 'normal';
}
function hidetr(tr){
 document.getElementById(tr).className = 'hidden';
}

HTML

<table>
 <tr>
  <th>I want to search for registrations in a certain area/by a certain date/by some other criteria that the site does not 
allow?<button onclick="showtr('faq5')">Show!</button></th>
</tr>
<tr>
 <td>
     <div id="faq5" class="hidden">
         Please <a href="contactus.php">Contact Us</a> with a summary of your requirements and purpose and if we are able to help we will do. At this time the search criteria on the site are purposefully limited.<button onclick="hidetr('faq5')">hide!</button></div>
  </td>
 </tr>
</table>

​</p>

于 2012-07-31T17:58:52.110 回答
0

你需要有有效的标记，你错过了一些标签。

更新代码：

演示：http: //jsfiddle.net/SO_AMK/dHEdZ/

HTML：

<table>
<tr>
    <th>
        I want to search for registrations in a certain area/by a certain date/by some other criteria that the site does not allow?<button onclick="showtr('faq5')">Show!</button>
    </th>
</tr>
<tr id="faq5" style="display:none">
    <td>
        Please <a href="contactus.php">Contact Us</a> with a summary of your requirements and purpose and if we are able to help we will do. At this time the search criteria on the site are purposefully limited.
        <button onclick="hidetr('faq5')">hide!</button>
    </td>
</tr>
</table>

​JavaScript：

function hidetr(tr){  
        document.getElementById(tr).style.display="none"; 
}
function showtr(tr){
        document.getElementById(tr).style.display="block"; 
}​

PS 你应该试试像jQuery这样的库，它会让你的生活变得更轻松。

于 2012-07-31T17:02:03.860 回答
0

显示值取决于元素。我发现这是一个很好的解决方案：

function showtr(tr)
{  
    document.getElementById(tr).style.display=""; 
}

这使浏览器可以为元素类型选择默认值。

或者，如果你不反对使用 jQuery，他们的 toggle() 函数非常好：

http://api.jquery.com/toggle/

于 2012-07-31T16:55:41.627 回答