网页设计:点击左侧标题,右侧显示相应内容

一个两列的表格,左边是标题,如何能实现点击左侧的标题,右侧的单元格里就显示相应的内容。
不要框架。

第1个回答  2010-06-10
如果按你说的话,那就要用JavaScript了,在右侧的单元格里面设置多个div,没一个标题对于一个div,然后当单击左面的标题的时候把右面的对应div设置成显示的,其他的设置成隐藏的就行了,我用写一段代码,你试试
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
function funcShow(id){
for(var i=0;i<5;i++){
var divInfo =document.getElementById('div'+(i+1));
divInfo.style.display='none';
}
var div =document.getElementById('div'+id);
div.style.display='block';
}
</script>
</head>
<body>
<table width="632" border="1">
<tr>
<td width="66"><a href="javascript:funcShow(1)">1 </a></td>
<td width="550" colspan="4" rowspan="5">
<div id="div1" style="display:block">此处显示id "div1" 的内容</div>
<div id="div2" style="display:none">此处显示id "div2" 的内容</div>
<div id="div3" style="display:none">此处显示id "div3" 的内容</div>
<div id="div4" style="display:none">此处显示id "div4" 的内容</div>
<div id="div5" style="display:none">此处显示id "div5" 的内容</div></td>
</tr>
<tr>
<td><a href="javascript:funcShow(2)">2 </a></td>
</tr>
<tr>
<td><a href="javascript:funcShow(3)">3 </a></td>
</tr>
<tr>
<td><a href="javascript:funcShow(4)">4 </a></td>
</tr>
<tr>
<td><a href="javascript:funcShow(5)">5 </a></td>
</tr>
</table>

</body>
</html>
希望对你有帮助本回答被提问者采纳
第2个回答  2010-06-10
用层实现,应该容易的很
第3个回答  2010-06-10
用 ajax

html点击左边代码右边显示相应的内容
1、首先在电脑中打开Dreamweaver,然后在网页设计中点击编辑按钮,就可以下拉。2、然后点击这个二级菜单代码折叠。3、接下来在这里就可以使用各种折叠的命令了,同样还能使用他的快捷键按钮。4、或者在代码这里还可以直接点击。5、这时候就可以看到代码后面这样省略的显示,代码就被折叠起来了。

html&css中,在左侧垂直导航栏的右侧添加内容应该怎么做?
在HTML与CSS中,添加内容至左侧垂直导航栏右侧,主要涉及内容布局与响应式设计的调整。通过使用HTML的``元素并结合CSS的定位属性(如`position: relative;`),可以实现导航栏与右侧内容的无缝集成。对于左侧的垂直导航栏,可以使用CSS的`display: flex;`和`flex-direction: column;`属性,使其在不同屏幕...

...网页点击左边的导航让文本内容显示在右边的区域里,可以用Ap div,怎...
<!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD XHTML 1.0 Strict\/\/EN" "http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-strict.dtd"> 选项卡 <!-- { margin:0; padding:0; font-size:12px; font-weight:normal; } .jj { font-weight:bolder!important; } .box { border-top-color:#c00!

点击标题显示对应的内容是超链接吗
是的。点击标题可以跳转到对应的内容,这就是超链接的一种应用。超链接是指在一个文档中插入一个链接,使得用户可以通过点击链接跳转到另一个文档或网页的指定位置。在网页设计和编写中,超链接是非常常用的一种技术。

网页设计有哪几种分类?
所谓同字型就够就是指页面顶部为“网站标志+广告条+主菜单”或主菜单,下方左侧为二级栏目条,右侧为链接栏目条,屏幕中间显示具体内容的布局。这种布局的优点是充分利用版面,页面结构清晰,左右堆成,主次分明,信息量大;缺点是页面拥挤,太规矩呆板,如果细节色彩上缺少变化调剂,很容易让人感到单调缺乏...

网页的布局类型有哪些?
5. "T"结构布局:这是网页设计中最常用的布局之一,特点是有顶部横幅和左侧主菜单,右侧显示内容。这种布局清晰、主次分明,便于用户使用,但若不注意细节设计,可能显得过于死板。6. "口"型布局:这种布局上下各有广告条,左侧是导航菜单,右侧是友情链接。中间是主要内容区域。这种布局内容丰富但页面...

如何通过点击不同的标题,在网页同一个位置显示不同的内容?
设置一个div块,比如 用document.getElementByID得到这个div块 点击连接时,用innerHtml修改内容 document.getElementById('divTitle').innerHTML = '现在是音乐';另外一个例子 function changeText(){ document.getElementById('boldStuff').innerHTML = 'Fred Flinstone';} Welcome to the site dud...

网页布局结构有哪些
布局就是以最合适浏览的方式将图片和文字排放在页面的不同位置。不同的制作者会有不同的布局设计。网页布局有以下几种常见结构:1.“同”字型结构布局所谓同字型就够就是指页面顶部为“网站标志+广告条+主菜单”或主菜单,下方左侧为二级栏目条,右侧为链接栏目条,屏幕中间显示具体内容的布局。这种...

一般的网页设计布局形式都有哪些
所谓“t”结构布局,就是指网页上边和左边相结合,页面顶部为横条网站标志和广告条,左下方为主菜单,右面显示内容,这是网页设计中用得最广泛的一种布局方式。在实际设计中还可以改变“t”结构布局的形式,如左右两栏式布局,一半是正文,另一半是形象的图片、导航。或正文不等两栏式布置,通过背景色...

网页布局是什么样的?
T型布局结构因与英文大写字母T相似而得名。其页面的顶部一般放置横网站的标志或Banner广告,下方左侧是导航栏菜单,下方右侧则用于放置网页正文等主要内容。【3】标题正文型 标题正文型布局的布局结构一般用于显示文章页面、新闻页面和一些注册页面等。【4】左右框架型布局 左右框架型布局结构是一些大型论坛和...

相似回答