我使用了四个链接来替换主页的内容,并将其他HTML文件中的信息展示出来。在每个页面上单独点击链接时可以正常运行脚本,刷新信息会重新出现。但我无法使用一个HTML页面来呈现所有四个链接的信息。
<div class="tab">
<button class="tablinks" onclick="openLink(event, 'Home')">Home</button>
<button class="tablinks" onclick="openLink(event, 'Tickets')">Tickets</button>
<button class="tablinks" onclick="openLink(event, 'Map')">Map</button>
<button class="tablinks" onclick="openLink(event, 'Schedule')">Schedule</button>
</div>
<div id="Home" class="tabContent"><br>
<h2 id="person"></h2><br>
<p>Information and content here </p><br>
</div>
<!-- new site information will erase above content and load new page with bottom div -->
<div id="result" class="tabContent">
</div>
JS/JQuery:
$("#result").load("tickets.html #Tickets");
$("#result").load("map.html #Map");
$("#result").load("schedule.html #Schedule");
function openLink(evt, link) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(link).style.display = "block";
evt.currentTarget.className += " active";
}