2017-09-28 9 views
0

Jquery UIを使用せずにタブセクションを作成しました。今私はそれにいくつかの条件を設定する必要があります。ユーザーが既にログインしている場合、最初のタブは非表示になり、2番目のタブに直接ジャンプします。

1)ユーザーが既にログインしている場合、最初のタブは非表示になり、2番目のタブに直接ジャンプします。

2)ユーザが現在のタブの内容のすべての詳細を入力しない限り、次のタブを無効にする必要があります。

これで私を助けてくれませんか?私は2番目のタブに直接ジャンプPHPを使用する私のため

$(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>

答えて

0

またはuがジャンプを制御したり、ジャンプしないために、PHPでのJSでVARを設定することができます

ないように注意してくださいヘルプ

+0

おかげで返事をあまりにも貧弱ですが、私はどのように使用することができますユーザーがログインしている場合は、2番目のタブに直接アクセスできますか?ログインしていなければ、最初のタブが表示されます –

+0

php check> echo ""; <<この方法で使用する場合は、次のタブでセッションで設定したIDをチェックする必要があります。他のユーザーは、jsコードを変更します。すべてのページがロードされている場合は、次のページでセッションを確認する必要はありません。 –

0

すべてのページをまとめてロードする場合

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

uがして、ページ1をロードする場合は、1つ

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

ません申し訳ありませんが、uがしたいのかわから

私の英語は

+0

私はTabを使用しています。セッションが設定されていない場合は、regページのみが表示されます。セッションセットが2番目のタブから表示され、最初に表示されますが、非表示になります –

関連する問題