选项卡用于替换页面上的内容，使用另一个HTML文件

Question

选项卡用于替换页面上的内容，使用另一个HTML文件

4

我使用了四个链接来替换主页的内容，并将其他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";
}

- Devin

“但是我无法让它使用一个HTML网站并具有所有四个的信息。”这句话的意思是什么？请详细解释问题。 - Bishwas Mishra

在主页上，原始内容显示在 div 中。当我点击一个新选项卡时，它不会超链接到其他 HTML 文件，而是清除内容，并获取其他页面的 div 内容。当点击其他选项卡时，它将清除内容，当点击链接回到主页时，主页内容重新出现。但其他三个链接都保持空白，没有内容显示。 - Devin

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- genife · Accepted Answer

好的，新代码如下：

Ok，新代码：

function eachButtons(a,b) {
    var list = document.getElementsByTagName('button');
    for (var i in list) {
        if (list[i].className === a) {
            list[i].onclick = b;
        }
    }
}

how to use?, look:

eachButtons('class','action');

例子：

HTML：

<body>
    <button className="link">google</button>
    <button className="link">bing</button>
</body>

script:

function myfunction() {alert('welcome');}
eachButtons('link',myfunction);

这将为所有具有链接类名的按钮创建一个点击警报。

错误的代码输入示例：

eachButtons('youclass',youfunction(ThisBacketsAreWrong));