Javascript 如何在每次使用JS/jquery单击导航项时更改网站上的文本块？

因此，我希望每次单击导航栏（紫色矩形）中的不同导航链接时，绿色矩形中的文本都会发生变化

目前，我有不同的.html文件可以更改它们，但我希望页面不会每次刷新，而只是替换文本，因为页面上的所有内容都保持不变，以减少加载时间和资源。谢谢

每个文本块都是html中的一个部分：

<section class="facts">
        <p><span class="underlined">Some random Franka facts:</span>
            <ul>
                <li>I know how to play piano and cello (I may have forgotten cello a bit, tbh…)</li>
                <li>Can’t live without a cup of coffee first thing in the morning</li>
                <li>Strongly resent waking up too early (but will do it for travels and if you lure me with coffee smell)</li>
                <li>I spend a ridiculous amount of time watching (yes, watching) League of Legends Championship (I play it as well)</li>
                <li>I am extremely happy that my name anagram is Krafna (=donut in Croatian)</li>
                <li>I like donuts</li>
                <li>I like red wine and craft beer</li>
                <li>I like writing scientific/research papers and organising conferences</li>
                <li>I love Simon Sinek</li>
                <li>I've always liked psychodelic everything (including websites ~ can you tell?)</li>
                <li>Purple is my favorite color</li>
            </ul>
        </p>

        <p>If I had to describe myself in 3 words it would be: courageous. wanderluster. open. </p>

        <p><span class="underlined">What I always wanted to do but never started (yet):</span>
            <ul>
                <li>write articles on Medium</li>
            </ul>
        </p>
    </section>

一些随机的弗兰卡事实：

我知道如何弹钢琴和大提琴（我可能有点忘了大提琴，tbh…）
早上第一件事就是喝杯咖啡
强烈不满起得太早（但会在旅行中这样做，如果你用咖啡味引诱我的话）
我花了很多时间看（是的，看）传奇联盟冠军赛（我也玩）
我非常高兴我的名字是Krafna（=克罗地亚语中的甜甜圈）
我喜欢甜甜圈
我喜欢红酒和工艺啤酒
我喜欢写科研论文和组织会议
我爱西蒙·辛克
我一直喜欢心理变态的一切（包括网站~你能告诉我吗？）
紫色是我最喜欢的颜色


如果我必须用三个词来描述我自己，那就是：勇敢。万宝路。打开

我一直想做但从未开始的事情：

在媒体上写文章

---

例如，当点击事实时，我想触发上面的文本，当点击知识时，一个不同的文本等。文本总是在同一个位置。

您可以使用javascript/jquery来实现这一点。我在这个解决方案中使用了jquery

HTML:

jQuery：

$('#button1').click(function(){
    $('.facts').removeClass('active');
  $('#fact1').addClass('active');
});

$('#button2').click(function(){
    $('.facts').removeClass('active');
  $('#fact2').addClass('active');
});

$('#button3').click(function(){
    $('.facts').removeClass('active');
  $('#fact3').addClass('active');
});

// change the button ids to your navbar link ids

---

如果您能提供一些与此相关的代码，那就太好了。当然，对于文本更改，您可以使用javascript来完成此操作。@JohannesPiontkowitz谢谢，刚刚做到了！关于js/jquery，你试过什么吗？@JohannesPiontkowitz我已经搜索了很多关于这个问题的答案，但还是找不到。我所发现的不适用于这种情况，即使我知道如何使用按钮或按钮本身来更改文本，我也不知道如何使单击导航项目触发更改部分文本（仍在学习js）。请检查我的答案。谢谢，我成功地在我的网站上应用了它！非常感谢您的快速回答：）

.facts{
  display:none;
}

.active{
  display:block;
}

$('#button1').click(function(){
    $('.facts').removeClass('active');
  $('#fact1').addClass('active');
});

$('#button2').click(function(){
    $('.facts').removeClass('active');
  $('#fact2').addClass('active');
});

$('#button3').click(function(){
    $('.facts').removeClass('active');
  $('#fact3').addClass('active');
});

// change the button ids to your navbar link ids