单击时显示/隐藏 W3.JS HTML 包含

Question

I have this code:

<ul>
    <li>
        <a href="#" id="fiatClick">Fiat</a>
    </li>
    <li>
        <a href="#" id="audiClick">Audi</a>
    </li>
</ul>

<div id="showCarInfo"></div>

And when a link is clicked, the proper content related to that link should be appended inside id="showCarInfo" .

As of now, with each click a new set of content is being generated instead of the content being swapped. How do I replace (toggle) the content inside the div with each click? I am using W3.JS to include HTML files in my HTML and this is my JS:

$('#fiatClick').click(function(e) {
        e.preventDefault();
        $('#showCarInfo').append('<div w3-include-html="fiat.html"></div>');
        w3.includeHTML();
    });
    $('#audiClick').click(function(e) {
        e.preventDefault();
        $('#showCarInfo').append('<div w3-include-html="audi.html"></div>').show();
        w3.includeHTML();
    });

Answer 1

你能把 .append() 改成 .html() 吗？