Question

请参阅此问题附带的图片。我有四张桌子。当我点击某个表名（例如表1）时，我希望该表显示在右侧。当我点击其他一些表名时，前一个应该消失并显示一个应该显示我只知道HTML。那么，请告诉我这是否可以单独用html完成。如果没有，我被允许只使用CSS和JavaScript（我对这两者都是新手，并将根据你的答案了解它们是否有用）。如果只使用这三种语言（即HTML，CSS和JavaScript）就可以实现这一点，请告诉我们。

Answer 1

这是您开始的最简单方法。它为您提供了一种简单的方法来跟踪正在发生的事情以及事情的运作方式。

使用此解决方案，可以轻松添加服务器端代码（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>
            &nbsp;
        </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>

<强>更新

为每个表使用一个文件如下所示：

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>
            &nbsp;
        </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>
            &nbsp;
        </td>
        <td>
            Content of 2
        </td>
    </tr>
</table>

如果你可以使用服务器端包含而你的“其他东西......”对于所有表都是相同的，你可以将该部分放在一个separete文件中，该文件将注入每个表内容。

Answer 2

您需要使用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);
    });
});

Answer 3

只需HTML即可完成最简单的方法，需要您构建4个不同的页面，并在它们之间进行链接。如果您希望它“看起来”就像在一个页面上一样，您可以使用HTML iframes通过将它们加载到当前页面中使其看起来像多页一样。

可以在一个页面中使用HTML和CSS执行此操作，但需要非常棘手的CSS和:selected选择器。

在“一页”中执行此操作的最简单方法是使用Javascript。 jQuery（一个javascript库）会让它更容易。

Answer 4

您需要知道javascript或jquery才能执行此操作。考虑到您的表有ID，这是jquery的示例

table_1
table_2
table_3
table_4

您的右侧容器标识为right-container

所以在点击事件上你可以这样做

$("[id^=table_]").click(function(){
    $("#right-container").html($(this).parent().html());
});

Answer 5

请试一试......

<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>

Answer 6

试试 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：因为我看到没有努力，所以造型部分我留给你。

Answer 7

另一个有效的答案。使用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>

Answer 8

这很容易，但需要使用JavaScript。单独使用html无法完成。

没有脚本的HTML是静态的。

当您向html添加脚本时，您将获得dhtml（动态HTML），并且您可以根据客户端与文档的交互来更改呈现的文档。

你熟悉jsfiddle吗？这是展示这一点的完美工具。

您将创建4个div（或表）。你将给每个人一个id，你将每个都设为“display：none”。您将以列表形式创建目录，并使用多种方法之一，将单击事件处理程序注册到列表中。

click事件处理程序将可见div / table的display属性设置为none，然后将所需div / table的display属性设置为none以外的其他值，例如“block”或“table”最后存储对可见div / table的引用，在下次调用事件处理程序时可以检索它。

单击按钮可显示或隐藏表格

8 个答案: