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>
おかげで返事をあまりにも貧弱ですが、私はどのように使用することができますユーザーがログインしている場合は、2番目のタブに直接アクセスできますか?ログインしていなければ、最初のタブが表示されます –
php check> echo ""; <<この方法で使用する場合は、次のタブでセッションで設定したIDをチェックする必要があります。他のユーザーは、jsコードを変更します。すべてのページがロードされている場合は、次のページでセッションを確認する必要はありません。 –