您有多个按钮具有相同的ID。不能在同一页面上重复使用ID。
为了简化代码，我删除了所有额外的代码，并将其限制为一组按钮。我还为每个按钮提供了一个数据目标，这样当单击该按钮时，您可以引用该数据来了解要显示的div。为了显示/隐藏，我使用了一个css类ACTIVE。Javascript具有切换/添加和删除对象中的类的能力。
另外，我将事件侦听器附加到document.body，并且无论页面上有多少按钮，都只创建一个单击处理程序。

document.body.addEventListener("click",(e) => {
  if(e.target.dataset.tabtarget){
    const active = document.querySelector(".tab-content.active");
    if(active){
      active.classList.remove("active")
    }
     const _target = document.querySelector(e.target.dataset.tabtarget);
     _target.classList.add("active");
  }
});

.tab-content{
  display: none;
  text-align: center;
}

.tab-content.active{
  display:block;
}

<button onclick="updateProgressBar()", id="think_button">think</button>
<nav id="nav_buttons">
    <button data-tabTarget="#main_container_writting">writting</button>
    <button data-tabTarget="#main_container_upgrades">upgrades</button>
    <button data-tabTarget="#main_container_options">options</button>
  </nav>  

<h2 class="curency" id="curency">0 words</h2>
  <div id="progress">
    <progress id="myProgress" value="0" max="100"></progress>
  </div>

<div class="tab-content" id="main_container_options">
    <p>asd3</p>
</div>

<div class="tab-content" id="main_container_upgrades">
    <p>asd2</p>
</div>

<div class="tab-content" id="main_container_writting">
    <p>asd</p>
</div>

你不应该对两个或多个元素使用相同的id，最好只设置一次按钮，然后像这样更改标签内容：

let main_container_writting = document.getElementById("main_container_writting");
let main_container_upgrades = document.getElementById("main_container_upgrades");
let main_container_options = document.getElementById("main_container_options");
let writing_tab = document.getElementById("writting_tab_button");
let upgrades_tab = document.getElementById("upgrades_tab_button");
let options_tab = document.getElementById("options_tab_button");

writing_tab.addEventListener("click", function() {
  main_container_writting.style.display = "block";
  main_container_upgrades.style.display = "none";
  main_container_options.style.display = "none";
});

upgrades_tab.addEventListener("click", function() {
  main_container_writting.style.display = "none";
  main_container_upgrades.style.display = "block";
  main_container_options.style.display = "none";
});

options_tab.addEventListener("click", function() {
  main_container_writting.style.display = "none";
  main_container_upgrades.style.display = "none";
  main_container_options.style.display = "block";
});

#main_container_upgrades {
  display: none;
  text-align: center;
}

#main_container_writting  {
  display: block;
  text-align: center;
}

#main_container_options {
  display: none;
  text-align: center;
}

.nav-container {
  text-align: center;
}

<div id="main_container_writting">
  <h2 class="curency" id="curency">0 words - wriring</h2>
  <div id="progress">
    <progress id="myProgress" value="0" max="100"></progress>
  </div>
  <button onclick="updateProgressBar()" id="think_button">think</button>  
  <p>asd</p>
</div>

<div id="main_container_upgrades">
  <h2 class="curency" id="curency">0 words - upgrades</h2>
  <div id="progress">
    <progress id="myProgress" value="0" max="100"></progress>
  </div>
  <p>asd2</p>
</div>
<div id="main_container_options">
  <h2 class="curency" id="curency">0 words - options</h2>
  <div id="progress">
    <progress id="myProgress" value="0" max="100"></progress>
  </div>
  <p>asd3</p>
</div>

<div class="nav-container">
  <nav id="nav_buttons">
      <button id="writting_tab_button">writting</button>
      <button id="upgrades_tab_button">upgrades</button>
      <button id="options_tab_button">options</button>
  </nav>
</div>