CSS对齐代码和显示下一个窗格的数据

本文关键字：数据 下一个 显示 对齐 代码 CSS | 更新日期: 2023-09-27 18:01:20

当我点击选项1时，数据应该在下一个窗格中可见，反之亦然

当用户单击Option1时，它应该向下一个窗格显示数据，如图所示。那么我们该怎么做呢?

CSS对齐代码和显示下一个窗格的数据

将Options视为按钮

<<p> asp代码/strong> 
<asp:Button ID="Option1Btn" class="btn" runat="server" OnClick="showDivContent1" />
<asp:Button ID="Option2Btn" class="btn" runat="server" OnClick="showDivContent2" />
<div runat="server" id="option1Content" Visible="false">Some Content </div>
<div runat="server" id="option2Content" Visible="false">Some Content </div>
后端代码

protected void showDivContent1(object sender, EventArgs e)
{
    Option1Btn.Visible = false;
    option1Content.Visible = true;
}

同样，您也可以对第二个选项执行

protected void showDivContent2(object sender, EventArgs e)
{
    Option2Btn.Visible = false;
    option2Content.Visible = true;
}

HTML 

<div class="left-pan" style="float: left; border-right: 1px solid;">
                <div class="Option-1" onclick="Option1Click();">
                    Option1
                </div>
                <div class="Option-2" onclick="Option2Click();">
                    Option2
                </div>
            </div>
            <div class="right-pan">
                <div class="showOption1" style="display: none;">
                    This is Option 1
                </div>
                <div class="showOption2" style="display: none;">
                    This is Option 2
                </div>
            </div>

Javascript: 

 function Option1Click() {
        $(".showOption1").css('display', 'block');
        $(".showOption2").css('display', 'none');
    }
    function Option2Click() {
        $(".showOption2").css('display', 'block');
        $(".showOption1").css('display', 'none');
    }
相关文章：