如果用户已经登录，则第一个标签将隐藏并直接跳转到第二个标签 [英] If the user already logged in then the first tab will hide and directly jump to the second tab
本文介绍了如果用户已经登录，则第一个标签将隐藏并直接跳转到第二个标签的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我没有使用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;填充：0; } .tab_section {width：700px;保证金：0汽车; } .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; tab_inside {padding：20px 30px; box-sizing：border-box; display：none;}。tab_inside form .text-fields {padding：border-box; display：none;}。background-color：＃00a63f;}。border {border：1px solid #ccc;}。 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 =tab1class =border tab_inside> < H2> demo1的< / H2> < form action =＃method =post> < div class =text-fields> <标签>用户名< /标签> < input type =textname =username> < / DIV> < div class =text-fields> <标签>密码< /标签> < input type =passwordname =password> < / DIV> < input type =submitname =submitvalue =submit> < /形式> < / DIV><！ - TAB1 - > <？php}？> < div id =tab2class =border tab_inside hide_tab> < H2> DEMO2< / H2> < form action =＃method =post> < div class =text-fields> < label>电子邮件< / label> < input type =emailname =email> < / DIV> < div class =text-fields> < label>手机号码< / label> < input type =textname =mobile> < / DIV> < input type =submitname =submitvalue =submit> < /形式> < / DIV><！ - TAB2 - > < div id =tab3class =border tab_inside> < H2> Demo3< / H2> < form action =＃method =post> < div class =text-fields> <标签>地址< /标签> < textarea name =address>< / textarea> < / DIV> < div class =text-fields> <标签>地址2< /标签> < textarea name =address2>< / textarea> < / DIV> < input type =submitname =submitvalue =submit> < /形式> < / DIV><！ - TAB4 - > < div id =tab4class =border tab_inside> < H2> Demo4< / H2> < H2>成功< / H2> < / DIV><！ - TAB4 - > < / DIV><！ - all_tab - > < / div>
解决方案
如果你把所有的页面加载在一起
<？php
$ session = 2; //例子会话数据值
？>
< 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 =d1name =dv>
注册页面
< / div>
< div id =d2name =dv>
标签2
< / div>
< / form>
如果你一个接一个地加载页面
<？php
$ session = 2; //会话数据值的示例
？>
< form>
<？php if（isset（$ session））
{？>
< div id =d1name =dv>
注册页面
< / div>
<？php}
else
{
？>
< div id =d2name =dv>
标签2
< / div>
<？php}？>
< / form>
不知道你想要什么，对不起
我的英文太穷了
I have created a tab section without using Jquery UI. Now I have to set some condition on it.
1) If the user already logged in then the first tab will hide and directly jump to the second tab.
2) I have to disabled next tab until and unless the user does not field all the details in the current tab content.
Would you help me in this?
$(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>
解决方案
if u load all the page together
<?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>
if u load the page one by one
<?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>
not sure what u want , sorry
my English is too poor
这篇关于如果用户已经登录，则第一个标签将隐藏并直接跳转到第二个标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
