如何通过jquery

时间:2015-10-15 20:08:37

标签: jquery html button tabs external

我有2个html页面。 第1页有3个内容选项卡。当我点击标签3时,会有一个链接将我带到新页面。在新页面上有一个“返回”按钮,当我点击按钮时,它会将我带回上一页,但是标签#1处于活动状态。当我点击“返回”按钮时,有没有办法实现它,标签#3处于活动状态而不是标签#1。

enter code here
    //page 1:
    <ul class="nav nav-tabs tabSet" role="tablist" id="myTab">
   <li class="active"><a href="#tab-1" role="tab" data-toggle="tab">tab2</a></li>
   <li><a href="#tab-2" role="tab" data-toggle="tab">tab2</a></li>
   <li><a href="#tab-3" role="tab" data-toggle="tab" id="up">tab3</a>  </li>

  //page 2:
  enter code here <input type="button" id="`Button" name="returnButton" value="Return to Report" onclick="returnToPrevious()" class="btn btn-primary" />

  <script type="text/javascript">
  function returnToPrevious()
{
    parent.history.back();
    return false;
}
 </script>
非常感谢

1 个答案:

答案 0 :(得分:0)

您可以使用url查询字符串进行播放:如果网址包含某个参数,则激活第三个标签。

假设第一页被称为first-page.html,您可以用这种方式更改第二页的javascript代码:

<script type="text/javascript">

function returnToPrevious()
{
    location.href = "first-page.html?back=yes";
    return false;
}

</script>

在第一页中,您可以激活第一个或第三个表,以评估网址中是否存在back=yes部分:

<!-- Notice that the class "active" is not present, because it will be managed in the javascript -->
<ul class="nav nav-tabs tabSet" role="tablist" id="myTab">
   <li><a href="#tab-1" role="tab" data-toggle="tab">tab1</a></li>
   <li><a href="#tab-2" role="tab" data-toggle="tab">tab2</a></li>
   <li><a href="#tab-3" role="tab" data-toggle="tab" id="up">tab3</a></li>
</ul>


<script type="text/javascript">

// Function that takes a param value from the query string of the url
// source: https://css-tricks.com/snippets/javascript/get-url-variables/
function getQueryStringVariable(variable)
{
   var queryString = window.location.search.substring(1);
   var vars = queryString.split("&");
   for (var i=0;i<vars.length;i++) {
       var pair = vars[i].split("=");
       if(pair[0] == variable){
            return pair[1];
        }
   }
   return false;
}


// Checks if the "back=yes" part in the url is present
var back = getQueryStringVariable("back");
if (back === "yes")
{
    $("a[href=#tab-3]").addClass("active");
}
else
{
    $("a[href=#tab-1]").addClass("active");
}

</script>