Question

我有一个包含4个jquery UI标签的页面。第一个选项卡只显示一条消息“HELLO”。第2，第3和第4个选项卡有一些运行的html和php脚本。所有页面都正确显示。但是比如说我正在通过提交按钮在第三个选项卡上执行php脚本。它确实被执行但是当页面重新加载时，我看到第一个选项卡闪烁一秒钟，然后显示第三个选项卡。所有选项卡的情况都是如此。第一个选项卡总是显示一秒钟然后就会显示。你可以告诉我添加一些代码，以便当其他选项卡执行某些php脚本时，绕过第一个选项卡（或编写它的div）。

我的Javascript如下：

<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' }
});
});

我的HTML代码如下：

 <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>

Answer 1

创建叠加div。将它放在整个页面的正文中，或放在position: relative的div中。

CodePen

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

在某些时候，隐藏该div以显示基础内容。这可能是在文档就绪处理程序中，或在AJAX调用之后。

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

你也可以加强它，并在叠加层内加载一条加载信息。

<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%;
}

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

1 个答案:

CodePen