防止窗口重新加载时看到标签

I have a page which has 4 jquery UI tabs. The first tab just displays a message saying "HELLO". The 2nd, 3rd and 4th tabs have some html and php scripts running. All the pages are getting displayed properly. But say for example I am executing the php script on the 3rd tab by submitting a button. It does get executed but when the page reloads, I see the first tab flicker for a second and then the 3rd tab gets displayed. Same is the case for all the tabs. The first tab always gets displayed for a seconds and then it goes. Could you please let me know to add some code so that the 1st tab (or the div in which it is written ) is bypassed when other tab executes some php script.

My Javascript is as follows :

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>


$(document).ready(function()

{
           $("#menu ul li a").click(function(e) {


            e.preventDefault();

            $("#menu ul li a").each(function() {


                    $(this).removeClass("active");

            });

                $(this).addClass("active");
});


$("#menu").tabs({
fx: { height: 'toggle', opacity: 'toggle' }
});
});

My HTML code is as follows :

 <div id="menu">
       <ul>
          <li><a href="#tab-1" onClick="window.location.href='#tab-1';return false;" >Welcome</a></li>

            <li><a href="#tab-2" onClick="window.location.href='#tab-2';return false" title="Decode">Activation Response Generator</a> </li>
          <li><a href="#tab-3" onClick="window.location.href='#tab-3';return false" title="Response">Decode Support Key</a></li>
           <li><a href="#tab-4" onClick="window.location.href='#tab-4';return false" title="Response">Decode Recovery Key</a></li>
     </ul>

     <div id="tab-1" >
        <div id ="main">

          <div align=center>
     <table style="padding-top:20px;"> <tr>
    <td style="padding-left:20px;"> <img src="Aruba_Networks_newLogo.png " />   </td>
    <br/>
    </div>


          <?php session_start();$user = $_SESSION['usr'];?>
            </br>
         <tr>
         <td> <font size ="6"> <b> <u> Welcome <?php echo $user; ?></u> </b> </font>  </td>
         </br>
         </br>
         <td> <font size ="6"> <b> <u> HAVE A GREAT DAY  </u> </b> </font> </td>
         </br>
         </br>
         <td> <font size ="6"> <b> <a href="logout.php">Logout</a> </b>  </font></td>
         </tr>




                </div>
                </div>





<div id="tab-2">
                      <div id= "main">

                      SOME HTML SUBMIT BUTTONS AND TEXTBOXES TO DISPLAY OUTPUT WITH PHP RUNNING IN THE BACKGROUND 
</div>
</div>

<div id="tab-3">
                      <div id= "main">

                      SOME HTML SUBMIT BUTTONS AND TEXTBOXES TO DISPLAY OUTPUT WITH PHP RUNNING IN THE BACKGROUND 
</div>
</div>

<div id="tab-4">
                      <div id= "main">

                      SOME HTML SUBMIT BUTTONS AND TEXTBOXES TO DISPLAY OUTPUT WITH PHP RUNNING IN THE BACKGROUND 
</div>
</div>

</div>

Create a overlay div. Put this inside the body for the whole page, or inside a div with position: relative.

CodePen

.overlay {
    position: fixed; /* or absolute if inside a div */
    width: 100%; height: 100%;
    background: white;
}

At some point, hide that div to show the underlying content. This would likely be in a document ready handler, or after an AJAX call.

$(document).ready(function(){  $('.overlay').fadeOut();  });

You can also spice it up, and put a loading message inside the overlay.

<div class="overlay">
  <h1>Loading</h1>
</div>

.overlay h1 {
  position: absolute;
  top: 45%; /* nearly the center, good enough for a second of visibility */
  text-align: center;
  width: 100%;
}