Question

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

我在表格中设置了一个faq页面，其中包含“内容”列表，当点击“显示”按钮时，正文变为可见。

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

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小时的新人。

Answer 1

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

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>

Answer 2

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

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

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

或者，如果你不喜欢使用jQuery，他们的toggle（）函数非常好：

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

Answer 3

您需要拥有有效的标记，但缺少一些标记。

更新的代码：

演示：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"; 
}

P.S。您应该尝试使用像jQuery这样的库，它会让您的生活更加轻松。

显示中的不可见链接：可见

3 个答案:

CSS

JS

HTML