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

Question

我创建了三个onclick触发器函数，它们在一个更大的水平div（＆＃34; main＆＃34;）中触发三个独立的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" );})
  ;})

Answer 1

答案很简单：在你点击其中一个div之后，另外两个div会淡出，因此它们是不可见的而不是可点击的。但是您的代码中没有重新显示div的功能，因此您无法单击它们（因为它们不存在）。 你需要想办法重新显示不可见的div（例如，使用第四个按钮），以使它们可见并再次点击。