如何在相同的html代码中打开内部页面

Question

我有一个登录页面和一个侧面导航，我试图让用户在这些导航之间移动，每个人都会用自己的内容更改中心div，当用户点击另一个选项时，中心将被替换。但每次我尝试jquerys或javascript我成功放置内容，但当我点击多个选项时，以前的选项仍然存在，新内容正在堆叠。我希望我明白我的观点

这是我的导航

<table id="navlist">
    <tr>
        <td><a href='#'><i class="fas fa-home"></i><br>Home</a></td>
    </tr>
    <tr>
        <td><a href='#'><i class="fab fa-autoprefixer"></i><br>System Requirements</a></td>
    </tr>
    <tr>
        <td><a href="#"><i class="fas fa-info-circle"></i><br>FAQs</a></td>
    </tr>
    <tr>
        <td><a href='#'><i class="fas fa-cogs"></i><br>System Support</a></td>
    </tr>
    <tr>
        <td><a href="#"><i class="fab fa-wpforms"></i><br>Forms</a></td>
    </tr>
</table>

和我试过的JavaScript

function SwapDivsWithClick(div1, div2) {
    firstDiv = document.getElementById(div1);
    secondDiv = document.getElementById(div2);
    if (secondDiv.style.display == "none") {
        firstDiv.style.display = "none";
        secondDiv.style.display = "block";
    } else {
        firstDiv.style.display = "block";
        secondDiv.style.display = "none";
    }
}

如果有人有更好的idieas，我会全力以赴

Answer 1

你可以使用jquery和html。

结构可以如下（target-id是自定义属性）：

<div class="navigation">
    <ul class="navigation-section">
        <li>
            <a href="#" target-id="home">Home</a>
        </li>
        <li>
            <a href="#" target-id="system-requirements">System Requirements</a>
        </li>
        <li>
            <a href="#" target-id="faqs">FAQs</a>
        </li>
        <li>
            <a href="#" target-id="system-support">System Support</a>
        </li>
    </ul>
</div>

他们各自的信息我把它保存在HTML本身

<div class="hide">
    <div id="home">
        Lorem ipsum dolor sit amet, ex eam dictas melius laboramus, id vel mazim qualisque posidonium. Pri an brute temporibus appellantur,
        qui error fierent et, et mei homero nostrud.
    </div>
    <div id="system-requirements">
        Latine voluptua maluisset pri ex, ea alienum ancillae assueverit pri, ne mea elitr scripserit referrentur. Brute dissentiunt
        ut sea, quaeque epicurei lobortis qui an. Ut eum wisi illud omnesque, oporteat accusamus mei in. Ne offendit detraxit
        repudiandae his. Ex stet ceteros noluisse quo, sit at fierent dissentiet.
    </div>
    <div id="faqs">
        Duo ad verear interesset, harum forensibus necessitatibus vis cu, ne mutat vitae noluisse sed. Cu nec maluisset scriptorem.
        Sit dicat dolorem interpretaris et, cum ut erat melius legendos, duo an nibh libris.
    </div>
    <div id="system-support">
        Mea mucius facete verterem ea, mei modo reprimique reformidans eu, et commune voluptaria nam. Vim quas aliquando cu. Cu qui
        nullam imperdiet aliquando. Eius nonumy an pro, mel ne modo senserit. Nam id vero facilisi, partem propriae nam et.
    </div>
</div>

使用jquery可以处理click事件：

function menuClick() {
    $('.navigation-section a').on('click', function () {
        var targetId = $(this).attr('target-id');
        $('.content-info').text($('#' + targetId).text());
    });
}

Demo