我有一個表「看到更多」寫在標題側「見習保險。」如何在點擊按鈕/文本時顯示信息？
我希望人們能夠點擊查看更多然後出現在標題下的信息
如何我要這樣做嗎？
謝謝！
詹姆斯
<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>
可能有其他的方法 - 非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>
你好！非常感謝您的幫助！ – James
我輸入了代碼，但看到更多不是可點擊的，我應該添加什麼？ – James
@James - 對不起。首先，確保瀏覽器中啓用了JavaScript。另外，將
我會使用jQuery顯示/隱藏文本時的塊「查看更多......」被點擊。
當然，這裏假設你已經熟悉使用jQuery。如果您不是，或者您不能/不會使用它，Google搜索就會快速啓動http://www.cssnewbie.com/showhide-content-css-javascript/
使用display = none;並在onclick事件中刪除它。
您將需要;點擊「查看更多」時會顯示隱藏的DIV。這將需要成爲Javascript或JQuery。或者讓一些PHP在表中生成另一行。
如果你想從一個單獨的文件加載數據，你將不得不使用AJAX。如果您想在點擊「See More」時顯示網頁上已有的元素，則可以使用常規javascript。只需在表中添加一個新行，給它一個ID並使用內聯樣式隱藏它。然後在「see more」文本週圍添加一個鏈接，併爲其提供一個顯示隱藏行的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>
你有一個20世紀90年代HTML的糟糕情況。
這裏是上世紀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'
}
一些提示：
使用jQuery：
給ID來你的 '查看更多' 按鈕，這是要顯示的內容：
$('#see_more').click(function() { $('#more_content').show(); });
<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>
正如你已經發現，有許多方法來實現這個。如果您對最現代的技術感興趣，您可能需要對DOM（文檔對象模型）的工作方式進行很好的處理，並檢出名爲jQuery（http://jquery.com/）的JavaScript庫。即使有關這些技術的基本知識，您也可以使用非常少的代碼來完成真棒。 –
將您的HTML更新爲21世紀的標準將有助於您的HTML開發體驗。 'font'標籤已被棄用，HTML中的'color'，'face'和'align'屬性也一併使用。表格佈局通常也被忽視。我強烈建議選擇Dan Cederholm的* Bulletproof Web Design *。 – Shauna