Javascript 如何在访问较小的div后重新加载较大的div

我创建了三个onclick触发器函数，它们在一个较大的水平div（“main”）中触发三个单独的div（体育、交互、新闻）。它们最初都会出现，但出于某种原因，该功能只在单击一次后才起作用，然后我必须刷新页面。例如，如果我单击“触发运动”功能，我必须先刷新页面，然后才能使用“新闻”按钮。从那里我必须刷新页面。在触发第二个或第三个事件之前，如何让主div重新加载？我尝试过location.reload（），但似乎不起作用

     <div id="main">

     <div id="news">
    <h2 id="newsbtn"> News </h2>
    </div>  

    <div id="interactive">
    <h2 id="interactivebtn"> Interactive</h2>
    </div>

    <div id="sports">
    <h2 id="sportsbtn"> Sports </h2>
    </div>

    </div>

    JavaScript
    $( "#newsbtn" ).click(function() {
    $("#sports").fadeOut( "slow", "linear" ),
    $("#interactive").fadeOut( "slow", "linear" );})


   $( "sportsbtn" ).click(function() {
   $("#interactive").fadeOut( "slow", "linear" ),
   $("#news").fadeOut( "slow", "linear" );})


  $("#interactivebtn" ).click(function() {
  $("#sports").fadeOut( "slow", "linear" ),
  $("#news").fadeOut( "slow", "linear" );})


   $( "#news" ).click(function() {
  $("#sports").fadeOut( "slow", "linear" ),
   $("#interactive").fadeOut( "slow", "linear" );})
  ;})

消息
互动的
体育
JavaScript
$（“#newsbtn”）。单击（函数（）{
美元（“#运动”）。淡出（“缓慢”、“线性”），
$（“#交互式”）.fadeOut（“慢速”、“线性”）；}）
$（“sportsbtn”）。单击（函数（）{
$（“#交互式”）。淡出（“缓慢”、“线性”），
$（“#新闻”）。淡出（“缓慢”、“线性”）；}）
$（“#interactiveebtn”）。单击（函数（）{
美元（“#运动”）。淡出（“缓慢”、“线性”），
$（“#新闻”）。淡出（“缓慢”、“线性”）；}）
$（“#新闻”）。单击（函数（）{
美元（“#运动”）。淡出（“缓慢”、“线性”），
$（“#交互式”）.fadeOut（“慢速”、“线性”）；}）
;})

答案相当简单：单击其中一个div后，其他两个div将淡出，因此它们不可见且不可单击。但是代码中没有重新显示div的功能，因此无法单击它们（因为它们不在那里）。

---

你需要想办法重新显示不可见的div（例如，使用第四个按钮），以使其可见并再次可点击。

这正是我想弄明白的。具体是什么？难道你不知道如何添加一个函数来重新显示div吗？