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

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

1 个答案: