Javascript 使用链接更新页面内容
我的网页上有四个选项卡（主页、联系人、关于等）。每个链接都指向不同的页面。相反，我需要使用相同的页面并单独更新主体部分。示例：单击contact时，它应该加载一个包含body中联系人信息的表Javascript 使用链接更新页面内容,javascript,html,Javascript,Html,我的网页上有四个选项卡（主页、联系人、关于等）。每个链接都指向不同的页面。相反，我需要使用相同的页面并单独更新主体部分。示例：单击contact时，它应该加载一个包含body中联系人信息的表 <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="1.css"> </head> <body bgcolor=white ID=body>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="1.css">
</head>
<body bgcolor=white ID=body>
<header class=head>
<img src="C:\Users\HP\Desktop\HTML web\ProfilePhoto.jpg" style="border-
radius: 50%;margin-left:5px;margin-top:4px;padding: 0px 0px;"><h1
align=right style="float:right;padding: -1px
2px">GowthamSarathy<br>works</h1>
</header>
<nav class=navv>
<a href="#">Home</a> | <a href=#>Portfolio</a> | <a
href="C:\Users\HP\Desktop\HTML web\conta us.html">Contact us</a> | <a
href="/jquery/" style="margin-right:5px;">Updates</a>
</nav>
<p>Lorem Ipsum dolor set amet....</p>
</body></html>
GowthamSarathy
有效
| | |
Lorem Ipsum dolor set amet
你的问题非常广泛，会得到很多不同的答案。但是，通过这种思路，您将很快进入Javascript领域 下面是一个来自 它大量使用css中的“”。 其他替代方法是使用id设置div的实际内容，示例可在本答案的底部找到 W3School选项卡示例
函数openCity（evt，cityName）{
//声明所有变量
var i，tabcontent，tablinks；
//使用class=“tabcontent”获取所有元素并隐藏它们
tabcontent=document.getElementsByClassName（“tabcontent”）；
对于（i=0；i/*设置选项卡的样式*/
.标签{
溢出：隐藏；
边框：1px实心#ccc；
背景色：#f1f1；
}
/*设置用于打开选项卡内容的按钮的样式*/
.选项卡按钮{
背景色：继承；
浮动：左；
边界：无；
大纲：无；
光标：指针；
填充：14px 16px；
过渡：0.3s；
}
/*更改悬停按钮的背景色*/
.tab按钮：悬停{
背景色：#ddd；
}
/*创建活动/当前tablink类*/
.tab按钮。激活{
背景色：#ccc；
}
/*设置选项卡内容的样式*/
.tabcontent{
显示：无；
填充：6px 12px；
边框：1px实心#ccc；
边界顶部：无；
}
伦敦
巴黎
东京
伦敦
伦敦是英国的首都
巴黎
巴黎是法国的首都。
东京
东京是日本的首都