Как сделать ссылку на конкретную вкладку с помощью jquery

Question

У меня есть 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>

большое спасибо

Answer 1

Вы можете сделать это, играя со строкой запроса url: если url содержит определенный параметр, тогда активна третья вкладка.

Предполагая, что первая страница называется first-page.htmlВы можете изменить код JavaScript второй страницы следующим образом:

<script type="text/javascript">

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

</script>

И на первой странице вы можете активировать первую или третью таблицу, оценивая, если back=yes часть присутствует или нет в URL:

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