CSS對齊的代碼和顯示數據在一個窗格

when I click on option 1 the data should be visible in next pane and vice versa CSS對齊的代碼和顯示數據在一個窗格

每當在選項1用戶點擊如在圖中給出它應該顯示的數據來下一個窗格。那麼應該做什麼？

來源

2016-08-09 Aniket Mainkar

你需要的JavaScript爲 – Roysh

可以請你分享一段代碼，這將真正幫助我 –

你在這裏有哪些關係不同的元素 - 您想要聽取選項一上的點擊事件，然後觸發內容元素以顯示文本。你能分享你的html代碼嗎？ – Roysh

考慮的選項按鈕

ASP代碼

<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; 
}

來源

2016-08-09 05:50:14

選項1和選項2是一個按鈕，當它被點擊時，數據網格視圖會顯示在它旁邊。 –

因此，dgv將作爲這裏提到的div，並在btn點擊時顯示。 –

請注意，雖然div已經存在於容器中，但它們是不可見的，只是根據按鈕的點擊選擇合適的div來顯示 –

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'); 
    }

來源

2016-08-09 07:44:30

CSS對齊的代碼和顯示數據在一個窗格

回答

相關問題