Question

我在“Trainee Insurance ...”标题的一侧写了一个“看得更多”的表格。

我希望人们能够点击查看更多信息，然后信息会显示在标题下方

我该怎么做？

谢谢！

詹姆斯

<table height="20" width="775" cellpadding="0" cellspacing="0">
<tr>
<td>
<font face="lucidagrande" size="4" color="black">Trainee Insurance Broker - London</font>
<td align="right">
<font face="lucidagrande" size="2" color="red">See More...</font> 
</td>
</tr>
</table>

Answer 1

使用JQuery：

为“查看更多”按钮和要显示的内容提供ID：

$('#see_more').click( function() { $('#more_content').show(); });

Answer 2

你有一个20世纪90年代HTML的坏案例。

这是20世纪90年代的做法：

<div>Trainee Insurance Broker - London</div>
<div id="a1" style="display:none">### more information ###</div>
<a href="javascript://" onclick="showThis('a1')">See More...</a>

JS：

function showThis(id) {
   document.getElementById(id).style.display='block'  
}

一些提示：

不要使用表格进行布局。使用HTML + CSS
不要使用内联字体语句，请使用CSS
探索jQuery。

Answer 3

可能有其他方式 - 非JavaScript方式 - 但我一直使用JavaScript来做到这一点。将onclick处理程序添加到“see more”td，并在该处理程序中将more元素设置为display:inline样式，类似这样（未经测试）：

<script type="text/javascript">
function show_more ( element_to_show ) {
var element_to_show = getRefToDiv( element_to_show );
element_to_show.style.display = "inline";
}
</script>

<table height="20" width="775" cellpadding="0" cellspacing="0">
<tr>
<td>
<font face="lucidagrande" size="4" color="black">Trainee Insurance Broker - London</font>
<td align="right" onclick="show_more('more');">
<font face="lucidagrande" size="2" color="red">See More...</font> 
</td>
<td id="more" style="display:none;">The guy will see this when he clicks See More...</td>, 
</tr>
</table>

Answer 4

只要点击“查看更多....”，我就会使用jQuery来显示/隐藏文本块。

http://api.jquery.com/show/

当然，这假设您已经熟悉jQuery。如果您不是，或者您不能/不会使用它，则会出现快速Google搜索http://www.cssnewbie.com/showhide-content-css-javascript/

Answer 5

使用display = none;在样式中并在onclick事件中删除它。

Answer 6

你需要;单击“查看更多”时会显示隐藏的DIV。这需要是Javascript或JQuery。或者让一些PHP在表中生成另一行。

Answer 7

如果要从单独的文件加载数据，则必须使用AJAX。如果要在单击“查看更多”时显示页面上已有的元素，则可以使用常规javascript。只需在表中添加一个新行，为其指定一个ID并使用内联样式隐藏它。然后在“查看更多”文本周围添加一个链接，并为其提供一个显示隐藏行的onclick处理程序。像这样：

<table height="20" width="775" cellpadding="0" cellspacing="0">
    <tr>
        <td><font face="lucidagrande" size="4" color="black">Trainee Insurance Broker - London</font></td>
        <td align="right"><font face="lucidagrande" size="2" color="red"><a href="#" onclick="document.getElementById('showme').style.display = 'table-row'; return false;">See More...</a></font></td>
    </tr>
    <tr id="showme" style="display: none">
        <td colspan="2">More info appears here!!!</td>
    </tr>
</table>

Answer 8

<script language="javascript">
$(document).ready(function(){

$('#see_more').click(function(){
$("#more_text").show();
});

     $("#more_text").hide();
});

</script>




 <table height="20" width="775" cellpadding="0" cellspacing="0">
 <tr>
 <td>
 <font face="lucidagrande" size="4" color="black">Trainee Insurance Broker - London</font>
 <td align="right" id="see_more">
 <font face="lucidagrande" size="2" color="red">See More...</font> 
 </td>
 </tr>

      <tr><td id="more_text">This is more text here......</td></tr>


 </table>

单击按钮/文本时如何显示信息？

8 个答案: