根据 PHP 变量值隐藏/显示选项卡内容

Question

我包含一个选项卡，当用户点击选项卡时显示相应的内容。这是选项卡和内容的代码。

HTML

<ul class="tabs" id="tab">
    <li rel="tab1"><a id="t1" href="#" title="Login via 2FA" class="<?php echo $FAActive; ?>" onclick="CngClass(this);">Login via 2FA</a></li>
    <?php if ($useSMS == true) { ?>
        <li rel="tab2"><a id="t2" href="#" title="Login via SMS" class="<?php echo $SMSActive; ?>" onclick="CngClass(this);">Login via SMS</a></li>
    <?php } ?>
</ul>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>">
    <div id="tab1" class="tab_content"> 
        <div class="form_settings">
            <h3>Secure Login via 2FA</h3>
            <p>Please use your 2FA device (mobile phone or computer).
            <p>Enter the security code: <input type="text" name="otp" value="" />
            <p><input class="submit" type="submit" name="2FAlogin" value="Enter" /></p>
        </div>
    </div><!-- #tab1 -->
    <div id="tab2" class="tab_content"> 
        <div class="form_settings">
            <h3>Secure ID from SMS</h3>
            <p>Please click on the button "Resend SMS".
            <p>The system will send SMS-OTP to your mobile number (<?php echo $MobileNumber; ?>). 
            <p style="margin-bottom: 15px;">SMS-OTP Code: <input type="text" name="passcode" value="" /></p>
            <p>
                <input class="submit" type="submit" name="SMSlogin" value="Sign In" />
                <input class="submit" type="submit" name="Resend" value="Resend SMS" />
            </p>
        </div>
    </div><!-- #tab2 -->
</form>

Javacsript

    <script type="text/javascript" src="modernizr-1.5.min.js"></script>
    <script type="text/javascript" src="jquery.js"></script><script type="text/javascript">

        $(document).ready(function () {

            $(".tab_content").hide();
            $(".tab_content:first").show();


            $("ul.tabs li").click(function () {                    
                $("ul.tabs li").removeClass("active");
                $(this).addClass("active");
                $(".tab_content").hide();
                var activeTab = $(this).attr("rel");
                $("#" + activeTab).fadeIn();
            });
        });

        function CngClass(obj) {
            var list = document.getElementById("tab").getElementsByTagName('a');

            for (i = 0; i < list.length; i++)
            {
                list[i].className = '';
            }

            obj.className = 'active';
        }

        /*]]>*/
    </script>

PHP

if (isset($_POST['Resend'])) {
    $FAActive = "";
    $SMSActive = "active";
}

if (isset($_POST['2FAlogin'])) {
    $FAActive = "active";
    $SMSActive = "";
}

我需要根据这个$FAActive、$SMSActive显示内容。每当我刷新页面时，它的选项卡内容将默认显示。我想将其更改为，对于 $FAActive 处于活动状态，则选定的选项卡将为 tab1，对于 $SMSActive，选定的选项卡将为 tab2。

我把这段代码放在里面 javascript <?php if(!empty($FAActive)) { ?> $(".tab_content:first").show(); <?php } else { ?> $(".tab_content:second").show(); <?php } ?> 但是它不会显示任何东西。任何人请帮我解决这个问题。

Answer 1

初始状态不需要 javascript。如果脚本加载时间太长，那将很难看。最好这样做：

<div id="tab1" class="tab_content" <?php if(empty( $FAActive ) ) echo 'style="display:none"'; ?>> 

<div id="tab2" class="tab_content" <?php if(!empty( $FAActive ) ) echo 'style="display:none"'; ?>>

jQuery-s 隐藏 apply-s 无论如何都完全相同的内联样式

Answer 2

您需要修改的内容很少。

隐藏选项卡内容。（您已经通过 .hide() 完成了此操作，但我建议您通过 CSS 隐藏它。） .tab_content{display:none}
选择您要初始显示的选项卡内容。这可以通过使用您在活动 link 的父 li 中使用的 "rel" 标记值并显示它来实现。

var activeContent = $("#tab .active").parent("li").attr("rel"); console.log(activeContent); $("#"+activeContent).show();

演示：http://codepen.io/anon/pen/JYyWOP 我省略了PHP部分，你可以手动设置class为"active"/""看看变化。

你的 PHP 文件都很好。

    $(document).ready(function () {

 //           $(".tab_content").hide();
 //           $(".tab_content:first").show();

            var activeContent = $("#tab .active").parent("li").attr("rel");
  console.log(activeContent);
  $("#"+activeContent).show();
            $("ul.tabs li").click(function () {                    
                $("ul.tabs li").removeClass("active");
                $(this).addClass("active");
                $(".tab_content").hide();
                var activeTab = $(this).attr("rel");
                $("#" + activeTab).fadeIn();
            });
        });

        function CngClass(obj) {
            var list = document.getElementById("tab").getElementsByTagName('a');

            for (i = 0; i < list.length; i++)
            {
                list[i].className = '';
            }

            obj.className = 'active';
        }

Answer 3

JavaScript 在客户端工作，但 PHP 在服务器端工作。您可以像这样修改 html-代码：

<div id="tab1" class="tab_content <?php echo $FAActive;?>">
...
<div id="tab2" class="tab_content <?php echo $SMSActive;?>">

在 JavaScript 中您需要删除初始化部分：

$(".tab_content").hide();
$(".tab_content:first").show();

并添加到 CSS 规则：

.tab{display:none;}
.tab.active{display:block;}

但我需要注意这种样式（当您检查字符串变量时）不是最好的方法，但如果您小心的话它会起作用。并且您需要先用空值初始化您的变量。

根据 PHP 变量值隐藏/显示选项卡内容

Hide / Show tab contents based on PHP variable value

html

javascript

php

jquery

tabs