如果用户已经登录，则第一个选项卡将隐藏并直接跳转到第二个选项卡

Question

我在没有使用Jquery UI的情况下创建了一个选项卡区。现在我必须为它设置一些条件。

1)如果用户已经登录，则第一个选项卡将隐藏并直接跳转到第二个选项卡。

2)我必须禁用下一个选项卡，直到用户没有在当前选项卡内容中填写所有详细信息。

你能在这方面帮我吗？

​

 $(document).ready(function() {
    $(".tab_target a").click(function(event) {
        event.preventDefault();
        $(this).parent().addClass("active_tab");
        $(this).parent().siblings().removeClass("active_tab");
        var tab = $(this).attr("href");
        $(".tab_inside").not(tab).css("display", "none");
        $(tab).fadeIn();
    });
});

 body{
    margin: 0;
    padding: 0;
  }

  .tab_section{
    width: 700px;
    margin: 0 auto;
  }
  .tab_section ul.tab_target{
position: relative;
display: block;
list-style: none;
padding: 0;
clear: both;
/*background: #f8f8f8;*/
}
.tab_section ul.tab_target li{
display: inline-block;
margin: 10px;
}
.tab_section ul.tab_target li a{
  padding: 06px 45px;
border: 1px solid #ccc;
text-decoration: none;
}
.tab_section ul.tab_target li a:hover{
  color: #fff;
  background-color: #00a63f;
}

.border{

border:1px solid #ccc;
}
.tab_inside
{
padding: 20px 30px;
box-sizing: border-box;
display: none;
}
.tab_inside form .text-fields{
  padding: 20px 0;
}
.tab_target li.active_tab {
position: relative;
background-color: #fff;
border-bottom: 1px solid #fff;
 z-index: 5;
}

#tab1 {
 display: block;   
}
.all_tab {
    border: 1px solid #d4d4d1;
    background-color: #fff;
    margin-bottom: 20px;
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<?php session_start(); ?>
    <div class="tab_section">
          <ul  class="tab_target">
            <li class="active_tab"><a href="#tab1">Demo1</a></li>
            <li><a href="#tab2">Demo2</a></li>
            <li><a href="#tab3">Demo3</a></li>
            <li><a href="#tab4">Demo4</a></li>
          </ul>
    <div class="all_tab">
      <?php if (!isset($_SESSION['username'])) {?>
    <div id="tab1" class="border tab_inside">
      <h2>Demo1</h2>
      <form action="#" method="post">
        <div class="text-fields">
        <label>username</label>
        <input type="text" name="username">
        </div>

        <div class="text-fields">
        <label>Password</label>
        <input type="password" name="password">
        </div>

        <input type="submit" name="submit" value="submit">
      </form>
    </div><!--tab1-->
    <?php
    } ?>

      <div id="tab2" class="border tab_inside hide_tab">
        <h2>Demo2</h2>
        <form action="#" method="post">
          <div class="text-fields">
          <label>Email </label>
          <input type="email" name="email">
          </div>

          <div class="text-fields">
          <label>Mobile no</label>
          <input type="text" name="mobile">
          </div>

          <input type="submit" name="submit" value="submit">
        </form>
      </div><!--tab2-->



      <div id="tab3" class="border tab_inside">
        <h2>Demo3</h2>
        <form action="#" method="post">
          <div class="text-fields">
          <label>Address</label>
                <textarea name="address"></textarea>
          </div>

          <div class="text-fields">
          <label>Address2</label>
          <textarea name="address2"></textarea>
          </div>

          <input type="submit" name="submit" value="submit">
        </form>
      </div><!--tab4-->


      <div id="tab4" class="border tab_inside">
        <h2>Demo4</h2>
        
    <h2>Success</h2>
      </div><!--tab4-->

    </div><!--all_tab-->
    </div>

​

Answer 1

对于我来说，我将使用php直接跳转到第二个选项卡

或者您可以通过php在js中设置一个var来控制跳转或不跳转。

不确定是否有帮助

Answer 2

如果您将所有页面一起加载

<?php 
    $session=2;// example of session data value
?>    
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script>
$(function()
{ 
    $("[name='dv']").css("display","none");

    <?php 
    if(isset($session))
        echo"$('#d2').css('display','');";  
    else
        echo"$('#d1').css('display','');";
    ?>
});
</script>

<form>
<div id="d1" name="dv">
    reg page
</div>
<div id="d2" name="dv">
    tab 2
</div>
</form>

如果您逐个加载页面

<?php 
    $session=2;// example of session data value
?>

<form>
<?php if(isset($session))
{?>
<div id="d1" name="dv">
    reg page
</div>
<?php }
else
{
?>
<div id="d2" name="dv">
    tab 2
</div>
<?php }?>
</form>

不知道你想要什么，抱歉

我的英语太差了