Question

我有一个标签形式：

    <ul class="tab-links">
      <li class="active"><a href="#tab1">Pending</a></li>
      <li><a href="#tab2">All</a></li>
    </ul>

  <div class="tab-content">
     <div id="tab1" class="tab active">
          //contents here
     </div>
     <div id="tab2" class="tab">
          //contents here
     </div>
  </div>

每次刷新页面时，它都会重定向到tab1 (which is pre-selected as active)

我的问题是，在tab2，当用户提交表单并且如果有错误时，我想将其重定向到tab2但是因为tab1是预先选择的活动选项卡。它总是转到标签1。

有没有办法将其重定向到预先选择的标签以外的其他标签？

PS：如果发生错误，我会使用提示框通知并重定向我的用户。

if(error){
   echo "<script>
     alert('Please state your reason!');
     window.location.href='home_admin.php#tab2';
         </script>";

TIA

Answer 1

您是否尝试过使用hashlink

即。 tabbedPage.html＃TAB2

Answer 2

您可以使用$.ajax()提交表单，然后将js代码添加到选定的标签2中。

也许这有用：将你的代码改为

<ul class="tab-links">
  <li class='tab1' class="active"><a href="#tab1">Pending</a></li>
  <li class='tab2'><a href="#tab2">All</a></li>
</ul>

<div class="tab-content">
    <div id="tab1" class="tab active">
      //contents here
    </div>
    <div id="tab2" class="tab">
      //contents here
    </div>
</div>

Js代码

$.ajax({
    type: "POST",
    url: "some.php",
    data: { name: "***", location: "*****" },
    dataType: 'json',
})
.done(function( response ) {
    if (reponse.erron === 1){
        //your code,or only return true
    } else {
        //seleted tab2 code,maybe 
        $('.tab-links.tab1').removeClass('active');
        $('.tab-links.tab2').addClass('active');

        $('.tab-content#tab1').removeClass('tab active');
        $('.tab-content#tab2').addClass('tab active');
    }
});

php code

$ret = array(
    erron: 0,    //0 for error,1 for success
    errmsg: '*****',
);

echo json_encode($ret);

Answer 3

将您的代码更改为：

<ul class="tab-links">
      <li class="active"><a href="#tab1">Pending</a></li>
      <li><a href="#tab2">All</a></li>
    </ul>

  <div class="tab-content">
     <div id="tab1" class="tab active">
          //contents here
     </div>
     <div id="tab2" class="tab">
          //contents here
     </div>
  </div>

我已经测试过，它有效，你可以在你身边测试

关键是改变

<div id="tab2 class="tab"">

到

<div id="tab2" class="tab">

如何重定向到设置为无效的选项卡页面

3 个答案: