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}
选择最初要显示的标签内容。这可以通过使用您在活动链接的父li中使用的“rel”标记值来实现并显示它。

var activeContent = $（“＃tab .active”）。parent（“li”）。attr（“rel”）; 的console.log（activeContent）; $（ “＃” + activeContent）.show（）;

演示：http://codepen.io/anon/pen/JYyWOP 我已经省略了PHP部分，您可以手动将类设置为“active”/“”以查看更改。

你的PHP文件都很好。

@ManagedBean
@SessionScoped
public class AccountsManagmentBean implements Serializable{

private static final long serialVersionUID = 1L;

private DataModel<UserModel> users;

private List<RoleModel> roles;

@PostConstruct
public void init() {
    GetUsersService getUsersService = new GetUsersService();
    List<UserModel> usersList = getUsersService.getUsers();
    UserModel[] usersArray = usersList.toArray(new UserModel[usersList.size()]);
    users = new ArrayDataModel<UserModel>(usersArray);

    RoleService roleService = new RoleService();
    roles = roleService.getRoles();
}

public DataModel<UserModel> getUsers() {
    return users;
}

public List<RoleModel> getRoles() {
    return roles;
}
}

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变量值的选项卡内容

3 个答案: