2016-08-09 25 views
2

when I click on option 1 the data should be visible in next pane and vice versaCSS Ausrichtung Code und Anzeigen von Daten auf dem nächsten Scheibe

Jedes Mal, wenn der Benutzer klickt auf Option1 es Daten zur nächsten Scheibe in der Figur als gegeben zeigen soll. also für was soll getan werden?

+1

Sie müssen Javascript aktivieren, für das – Roysh

+0

Können Sie bitte Stück Code teilen für, dass es mir wirklich helfen –

+0

heraus, was Sie haben hier sind die Beziehungen zwischen zu verschiedene Elemente - Sie möchten ein Klickereignis auf Option eins hören und dann das Inhaltselement auslösen, damit der Text angezeigt wird. Können Sie Ihren HTML-Code teilen? – Roysh

Antwort

0

Unter Berücksichtigung der Optionen als Tasten

ASP-Code

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

Backend-Code

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

Ebenso Sie für die zweite Option tun können, als auch

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

Option 1 und Option 2 ist eine Schaltfläche, und wenn es angeklickt wird, wird die Datagrid-Ansicht daneben angezeigt. –

+0

Also wird der dgv als die hier erwähnten divs dienen und nach einem Klick auf btn wird er angezeigt. –

+0

Beachten Sie, dass, obwohl die divs bereits im Container vorhanden sind, sie unsichtbar sind und es nur eine Frage der Auswahl des geeigneten div ist, das je nach dem Klick auf die Schaltfläche angezeigt wird –

0

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