2011-01-06 24 views
1

我正在製作asp.net網站。在那裏有一個鏈接按鈕(名爲固定電話號碼)。下面有三個文本框。之後有一條水平線。如何動態更改水平線的位置?

現在在第一次只有鏈接按鈕和水平將是可見的,並且咆哮鏈接按鈕的文本框將不可見。 現在,如果用戶點擊鏈接按鈕,則會顯示文字框,這是咆哮鏈接按鈕。然後,第一次咆哮到鏈接按鈕的水平線應該調整到它的位置並且應該在文本框之後。

如果用戶再次點擊鏈接按鈕,那麼文本框應該是可見的false。並且水平線應該顯示其原始位置,這是咆哮到鏈接按鈕。當然,我可以處理文本框的可見性,但我無法理解如何動態更改水平線的位置?

+1

我的想象力不如以前那麼好......你有代碼段嗎? – Ben 2011-01-06 05:59:14

回答

0

試試這個:

<a href="javascript:void()" onclick="toggleTextBoxes()">Toggle Text</a><br/> 
<div id="divBox" style="display:none"> 
    <input type="text" name="text1"/> 
    <input type="text" name="text2"/> 
    <input type="text" name="text3"/> 
</div> 
<hr/> 
<script> 
    function toggleTextBoxes() 
    { 
     var divBox = document.getElementById("divBox"); 
     divBox.style.display = (divBox.style.display.toLowerCase() == "none")?"block":"none"; 
    } 
</script> 

所以,你的aspx頁面會是這樣:

<a href="javascript:void()" onclick="toggleTextBoxes()">Toggle Text</a><br/> 
<div id="divBox" style="display:none"> 
    <asp:Textbox runat="server" id="text1"/> 
    <asp:Textbox runat="server" id="text2"/> 
    <asp:Textbox runat="server" id="text3"/> 
</div> 
<hr/> 
<script> 
    function toggleTextBoxes() 
    { 
     var divBox = document.getElementById("divBox"); 
     divBox.style.display = (divBox.style.display.toLowerCase() == "none")?"block":"none"; 
    } 
</script> 
0

假設你正在做的服務器上更多的東西除了顯示/隱藏的箱子,你會需要使用「服務器端」控件,所以它就在這裏。

首先,面板控制這樣包住文本框:現在

<asp:Panel id="pnlTextboxesPlaceholder" runat="server"> 
    <asp:Textbox runat="server" id="text1"/> 
    <asp:Textbox runat="server" id="text2"/> 
    <asp:Textbox runat="server" id="text3"/> 
</asp:Panel> 

,在代碼Page_Load事件背後使面板最初由具有這樣的代碼隱藏:

pnlTextboxesPlaceholder.style["display"] = "none"; 

下一頁步驟是「記住」面板的最後一個狀態,即可見或隱藏..爲此,您可以使用隱藏輸入:

<asp:HiddenField ID="hdnTextboxPanelState" runat="server" Value="hidden" /> 

現在鏈接按鈕點擊事件,有這樣的代碼:

void LandlineNumber_Click(object sender, EventArgs e) 
{ 
    bool blnHidden = (hdnTextboxPanelState.Value == "hidden"); 
    pnlTextboxesPlaceholder.style["display"] = blnHidden ? "" : "none"; 
    hdnTextboxPanelState.Value = blnHidden ? "visible" : "hidden"; 
} 

最後,將面板下方的<hr />,它會在正確的地方,每次展示。