Wie ändert man die Position der horizontalen Linie dynamisch?

Question

Ich mache asp.net Website. Darin gibt es einen Link-Button (genannt Festnetznummer). Beachten Sie, dass es drei Textfelder gibt. Und danach gibt es eine horizontale Linie.

Jetzt zum ersten Mal nur Link Schaltfläche und horizontal werden sichtbar sein, und Textfelder, die auf Link-Schaltfläche ist nicht sichtbar. Nun, wenn Benutzer auf den Link-Button klicken, dann werden die Textfelder, die zum Link-Button gehört, sichtbar sein. Dann sollte die horizontale Linie, die zum ersten Mal unter der Link-Schaltfläche steht, an ihren Ort angepasst werden und sollte nach Textboxen gehen.

Und wenn Benutzer klicken, um die Schaltfläche erneut zu verknüpfen, dann sollten Textfelder falsch angezeigt werden. Und die horizontale Linie sollte ihre ursprüngliche Position anzeigen, die mit der Link-Schaltfläche verbunden ist. Natürlich kann ich mit der Sichtbarkeit von Textfeldern umgehen, aber ich kann nicht verstehen, wie man die Position der horizontalen Linie dynamisch ändert?

Answer 1

Try this:

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

So Sie aspx Seite wäre wie:

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

Answer 2

Angenommen, Sie sind mehr Material auf dem Server zu tun außer zu zeigen,/die Kisten versteckt, werden Sie müssen "serverseitige" Steuerelemente verwenden, also hier ist es.

Zuerst wickeln Sie die Textfelder mit Panel-Steuerelement wie folgt aus:

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

nun im Page_Load -Ereignis im Code hinter machen die Platte zunächst durch einen solchen Code versteckt:

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

Weiter Schritt ist es, sich den letzten Zustand des Panels zu merken, dh "sichtbar" oder "versteckt". Dazu können Sie den versteckten Eingang verwenden:

nun in dem Click-Ereignis Link-Taste, haben einen solchen Code:

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

schließlich die <hr /> unter dem Panel platzieren und es wird jedes Mal an der richtigen Stelle zeigen.