Question

我目前正在使用Jquery UI标签创建网页。有3个选项卡，在第一个选项卡中只显示一条消息，说“你好”和“有一个美好的一天”。第二个和第三个选项卡有另一个执行某些操作的页面。页面有一个上传文件的位置，单击一个按钮后，它会对文件执行一些操作，结果显示在文本框中。现在问题是，只要我点击这2页中的任何一页中的按钮，我的主页就会被重定向到显示“你好”的第一个标签。如何更改我的代码，以便即使在我提交按钮后，我的第2或第3个选项卡也完好无损？

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


$(function()
{
             $("#menu  ul li a").each(function() {
                        $(this).removeClass("active");
                });

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

                $("#menu ul li a").each(function() {
                        $(this).removeClass("active");
                });

                $(this).addClass("active");
});      
$("#menu").tabs({ fx: {opacity:"toggle"}} );
});

和我的HTML代码：

<body  background="wood_bg.jpg" >

<div id="menu">
   <ul>
     <li> <a href="#tab-1" >Welcome</a></li>
      <li> <a href="#tab-2" title="Decode">Decode Support key</a></li>
      <li> <a href="#tab-3" title="Response">Response Generator</a></li>
   </ul>

<div id="tab-1" >
    <div id ="main">
             <p> HELLO </p>
             <p> HAVE A GREAT DAY </p>

            </div>
            </div>

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

   <p>   MY 2nd TAB PAGE HERE </p>

            </div>
            </div>


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

   <p>   MY 3nd TAB PAGE HERE </p>

            </div>
            </div>

Answer 1

您可以从您的控制器重新修改到包含参数的页面，例如?tab=3

在您的页面上，让JS分析'page'参数并显示正确的选项卡，如下所示：

$(function() {
  // get params from window.location.href
  var tab = params.tab || 1;
  $("#tab-"+tab).click();
});

如何从位置获取参数 - 例如：http://blogosys.com/2011/09/how-to-read-url-parameters-from-address-bar-using-javascript.html

PAge重定向到第一个选项卡

1 个答案: