請參閱附加的問題。我有四張桌子。當我點擊某個表名（例如表1）時，我希望該表能夠顯示在右側。當我點擊一些其他表名時，前一個應該消失並且應該顯示一個。
我只知道html。所以，請告訴我這是否可以單獨使用html完成。如果沒有，我只能使用CSS和JavaScript（我對這兩個都是新手，並會根據您的答案瞭解它們是否會有所幫助）。如果只能使用這三種語言（即HTML，CSS和JavaScript）來實現，請告訴。點擊按鈕以顯示或隱藏某個表格
這裏是你開始最簡單的方法。它爲您提供了一個簡單的方法來跟蹤正在發生的事情以及事情的工作方式。
此外，通過此解決方案，您可以輕鬆添加服務器端代碼（asp/php）來處理JavaScript禁用的用戶。
演示：http://jsfiddle.net/DEv8z/2/
的Javascript
function show(nr) {
document.getElementById("table1").style.display="none";
document.getElementById("table2").style.display="none";
document.getElementById("table3").style.display="none";
document.getElementById("table4").style.display="none";
document.getElementById("table"+nr).style.display="block";
}
CSS
td {
vertical-align: top;
}
#table1, #table2, #table3, #table4 {
display: none;
}
HTML
Other things goes here ... <br /><br />
<table>
<tr>
<td>
<a href="#" onclick='show(1);'>Table 1</a>
<br />
<a href="#" onclick='show(2);'>Table 2</a>
<br />
<a href="#" onclick='show(3);'>Table 3</a>
<br />
<a href="#" onclick='show(4);'>Table 4</a>
</td>
<td>
</td>
<td>
<div id="table1"> Content of 1 </div>
<div id="table2"> Content of 2 </div>
<div id="table3"> Content of 3 </div>
<div id="table4"> Content of 4 </div>
</td>
</tr>
</table>
UPDATE
使用爲每個表文件是這樣的：
table1.html
Other things goes here ... <br /><br />
<table>
<tr>
<td>
<a href="table2.html">Table 2</a>
<br />
<a href="table3.html">Table 3</a>
<br />
<a href="table4.html">Table 4</a>
<br />
.....
</td>
<td>
</td>
<td>
Content of 1
</td>
</tr>
</table>
-----------------------------------------------------
table2.html
Other things goes here ... <br /><br />
<table>
<tr>
<td>
<a href="table1.html">Table 1</a>
<br />
<a href="table3.html">Table 3</a>
<br />
<a href="table4.html">Table 4</a>
<br />
.....
</td>
<td>
</td>
<td>
Content of 2
</td>
</tr>
</table>
如果你可以使用服務器端包含和你的「其他的事情......」將是所有表一樣，你可以將該部分放入分隔符文件中，該文件將注入每個表格內容。
這是很容易做到，但需要使用JavaScript。 它不能單獨使用html完成。
沒有腳本的html是靜態的。
當您將腳本添加到html時，您將獲得dhtml（動態HTML），並且可以基於客戶端與文檔的交互情況來更改渲染文檔。
您是否熟悉jsfiddle？這是證明這一點的完美工具。
您將創建4個div（或表）。你會給每個ID，你會將每個樣式設置爲「display：none」。您將創建您的目錄作爲列表並使用其中一種方法，向列表中註冊一個單擊事件處理程序。
click事件處理程序會將可見的div/table的display屬性設置爲none，然後將所需div/table的display屬性設置爲非「none」之類的東西，例如「block」或「table」和將最終存儲對可見div /表的引用，以便在下一次調用事件處理程序時檢索它。
只需使用HTML就可以完成最簡單的方法，您需要構建4個不同的頁面並將它們鏈接在一起。如果你希望它看起來像是在一個頁面上，你可以使用HTML iframes，使它看起來像你的許多頁面是一個頁面，通過加載它們到當前頁面。
可以在一個頁面中只使用HTML和CSS來完成此操作，但需要非常棘手的CSS和:selected選擇器。
在「單頁」中最簡單的方法是使用Javascript。 jQuery（一個JavaScript庫）將使它更容易。
您需要知道javascript或jquery才能做到這一點。 這裏是jquery一個例子考慮你的表有ID
table_1
table_2
table_3
table_4
而且你右手邊的容器有Click事件ID right-container
所以，你可以像
$("[id^=table_]").click(function(){
$("#right-container").html($(this).parent().html());
});
您需要JavaScript來做到這一點。我有一個JSFiddle，下面的代碼。 JSFiddle是交互式的，可以讓你玩這個解決方案。我依賴一個名爲jQuery的流行JavaScript框架來使這更容易一些。您需要將jQuery框架加載到您的網站才能使其工作。這裏是JSFiddle鏈接：http://jsfiddle.net/sU9Pf/
以下是您可以在上面的JSFiddle鏈接中交互式運行的代碼。首先是一些例子HTML：
<table id="one" border="1"><caption>Table One</caption></table>
<table id="two" border="1"><caption>Table Two</caption></table>
<table id="three" border="1"><caption>Table Three</caption></table>
<table id="four" border="1"><caption>Table Four</caption></table>
<div id="showTableHereWhenTableIsClicked">
<p>Click A Table To Show It Here</p>
</div>
接下來是，它使你想要做什麼JavaScript的：
$(function() {
$('table').on('click', function() {
var tableClone = $.clone(this);
var stage = $('#showTableHereWhenTableIsClicked');
stage.prop('innerHTML', '');
$(tableClone).appendTo(stage);
});
});
請嘗試...
<style type="text/css">
#tablist{
padding: 3px 0;
margin-left: 0;
margin-bottom: 0;
margin-top: 0.1em;
font: bold 12px Verdana;
}
#tablist li{
list-style: none;
display: inline;
margin: 0;
}
#tablist li a{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: white;
}
#tablist li a:link, #tablist li a:visited{
color: navy;
}
#tablist li a.current{
background: lightyellow;
}
#tabcontentcontainer{
width: 400px;
/* Insert Optional Height definition here to give all the content a unified height */
padding: 5px;
border: 1px solid black;
}
.tabcontent{
display:none;
}
</style>
<script type="text/javascript">
/***********************************************
* Tab Content script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
//Set tab to intially be selected when page loads:
//[which tab (1=first tab), ID of tab content to display]:
var initialtab=[1, "sc1"]
////////Stop editting////////////////
function cascadedstyle(el, cssproperty, csspropertyNS){
if (el.currentStyle)
return el.currentStyle[cssproperty]
else if (window.getComputedStyle){
var elstyle=window.getComputedStyle(el, "")
return elstyle.getPropertyValue(csspropertyNS)
}
}
var previoustab=""
function expandcontent(cid, aobject){
if (document.getElementById){
highlighttab(aobject)
detectSourceindex(aobject)
if (previoustab!="")
document.getElementById(previoustab).style.display="none"
document.getElementById(cid).style.display="block"
previoustab=cid
if (aobject.blur)
aobject.blur()
return false
}
else
return true
}
function highlighttab(aobject){
if (typeof tabobjlinks=="undefined")
collecttablinks()
for (i=0; i<tabobjlinks.length; i++)
tabobjlinks[i].style.backgroundColor=initTabcolor
var themecolor=aobject.getAttribute("theme")? aobject.getAttribute("theme") : initTabpostcolor
aobject.style.backgroundColor=document.getElementById("tabcontentcontainer").style.backgroundColor=themecolor
}
function collecttablinks(){
var tabobj=document.getElementById("tablist")
tabobjlinks=tabobj.getElementsByTagName("A")
}
function detectSourceindex(aobject){
for (i=0; i<tabobjlinks.length; i++){
if (aobject==tabobjlinks[i]){
tabsourceindex=i //source index of tab bar relative to other tabs
break
}
}
}
function do_onload(){
var cookiename=(typeof persisttype!="undefined" && persisttype=="sitewide")? "tabcontent" : window.location.pathname
var cookiecheck=window.get_cookie && get_cookie(cookiename).indexOf("|")!=-1
collecttablinks()
initTabcolor=cascadedstyle(tabobjlinks[1], "backgroundColor", "background-color")
initTabpostcolor=cascadedstyle(tabobjlinks[0], "backgroundColor", "background-color")
if (typeof enablepersistence!="undefined" && enablepersistence && cookiecheck){
var cookieparse=get_cookie(cookiename).split("|")
var whichtab=cookieparse[0]
var tabcontentid=cookieparse[1]
expandcontent(tabcontentid, tabobjlinks[whichtab])
}
else
expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1])
}
if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload
</script>
<ul id="tablist">
<li><a href="http://www.dynamicdrive.com" class="current" onClick="return expandcontent('sc1', this)">Dynamic Drive</a></li>
<li><a href="new.htm" onClick="return expandcontent('sc2', this)" theme="#EAEAFF">What's New</a></li>
<li><a href="hot.htm" onClick="return expandcontent('sc3', this)" theme="#FFE6E6">What's Hot</a></li>
<li><a href="search.htm" onClick="return expandcontent('sc4', this)" theme="#DFFFDF">Search</a></li>
</ul>
<DIV id="tabcontentcontainer">
<div id="sc1" class="tabcontent">
Visit Dynamic Drive for free, award winning DHTML scripts for your site:<br />
</div>
<div id="sc2" class="tabcontent">
Visit our <a href="http://www.dynamicdrive.com/new.htm">What's New</a> section to see recently added scripts to our archive.
</div>
<div id="sc3" class="tabcontent">
Visit our <a href="http://www.dynamicdrive.com/hot.htm">Hot</a> section for a list of DD scripts that are popular to the visitors.
</div>
<div id="sc4" class="tabcontent">
<form action="http://www.google.com/search" method="get" onSubmit="this.q.value='site:www.dynamicdrive.com '+this.qfront.value">
<p>Search Dynamic Drive:<br />
<input name="q" type="hidden" />
<input name="qfront" type="text" style="width: 180px" /> <input type="submit" value="Search" /></p>
</form>
</div>
</DIV>
這真的很有幫助。但是如果輸出結果就像我在上面的圖片中展示的那樣會更好。 – Gauranga
試試這個FIDDLE
HTML ：
<span id="sp1">Table 1</span>
<span id="sp2">Table 2</span>
<span id="sp3">Table 3</span>
<span id="sp4">Table 4</span>
<table border="1" id="t2">
<tr><td>22</td></tr>
<tr><td>22</td></tr>
</table>
<table border="1" id="t3">
<tr><td>33</td></tr>
<tr><td>33</td></tr>
</table>
JS：
document.getElementById('sp1').addEventListener("click",function(){
showTable('t1');
});
document.getElementById('sp2').addEventListener("click",function(){
showTable('t2');
});
function showTable(table){
var tables =['t1','t2','t3','t4'];
for(var i=0;i<4;i++){
document.getElementById(tables[i]).style.display = "none";
}
document.getElementById(table).style.display = "block";
}
P.S：因爲我看到不遺餘力，造型部分我我把它留給你。
另一個工作答案。 使用HTML，CSS，JQUERY。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#tab1").hide();
$("#tab2").hide();
$("#tab3").hide();
$("#t1").click(function()
{
$("#tab1").show();
$("#tab2").hide();
$("#tab3").hide();
});
$("#t2").click(function()
{
$("#tab1").hide();
$("#tab2").show();
$("#tab3").hide();
});
$("#t3").click(function()
{
$("#tab1").hide();
$("#tab2").hide();
$("#tab3").show();
});
});
</script>
<style>
table
{
width:100px;
}
#tab1
{
background:red;
margin: 12px;
}
#tab2
{
background:green;
margin: 12px;
}
#tab3
{
background:blue;
margin: 12px;
}
#panel
{
width:125px;
height:80px;
border:1px solid black;
float:right;
}
#t1, #t2, #t3
{
cursor: pointer;
width:50px;
height:30px;
border:1px solid black;
}
</style>
</head>
<div>
<div id="t1">TAB1</div>
<div id="t2">TAB2</div>
<div id="t3">TAB3</div>
<div id="panel">
<table border="1" id="tab1">
<tr><td>TAB1</td></tr>
<tr><td>RED</td></tr>
</table>
<table border="1" id="tab2">
<tr><td>TAB2</td></tr>
<tr><td>GREEN</td></tr>
</table>
<table border="1" id="tab3">
<tr><td>TAB3</td></tr>
<tr><td>BLUE</td></tr>
</table>
</div>
</div>
你的原始代碼..？ – Era
不，這不能用只有HTML來完成。你需要學習JS。 –
這需要使用JS或Jquery完成的DOM操作。 – V31