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

【问题标题】：Hide / Show tab contents based on PHP variable value根据 PHP 变量值隐藏/显示选项卡内容
【发布时间】：2015-10-12 08:19:48
【问题描述】：

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

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 } ?> 中，但它不会显示任何内容。任何人请帮我解决这个问题。

【问题讨论】：

$(".tab_content:second") 在 jQuery 中不存在，正确的语法是使用 :nth-child() : $(".tab_content:nth-child(2)")。
CngClass()中有一个for循环

标签： javascript php jquery html tabs

【解决方案1】：

您需要修改的东西很少。

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

var activeContent = $("#tab .active").parent("li").attr("rel"); 控制台.log（活动内容）； $("#"+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';
        }

【讨论】：

【解决方案2】：

初始状态不需要 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 还是一样的内联样式

【讨论】：

根据您的代码第一次我也只能看到一个 div。实际上这只会在表单提交后发生，取决于我想隐藏一个 div 的表单提交。
如果帖子不存在，我相信你可以调整它以显示两者，我只是想展示这个想法，如果你愿意，我可以将其作为完整的工作代码

【解决方案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;}

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

【讨论】：