0

我有一个包含 4 个 jquery UI 选项卡的页面。第一个选项卡只显示一条消息“你好”。第 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>
4

1 回答 1

0

创建一个覆盖 div。将它放在整个页面的正文中，或者放在带有position: relative.

代码笔

.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%;
}
于 2013-08-05T00:51:26.380 回答