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

Можете ли вы поделиться кусок кода для этого он действительно поможет мне –

То, что вы здесь отношения к различные элементы - Вы хотите прослушать событие щелчка на опции 1, а затем вызвать элемент содержимого, чтобы текст отображался. Вы можете поделиться своим html-кодом? – Roysh

Учитывая параметры, как кнопки

жерех код

<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 Код

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

Кроме того, вы можете сделать для 2-го варианта, а

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

источник

2016-08-09 05:50:14

Вариант 1 и Вариант 2 - это кнопка, и когда она нажимается, рядом с ней отображается представление datagrid. –

Таким образом, dgv будет использоваться в качестве разделов, упомянутых здесь, и после нажатия btn он будет показан. –

Обратите внимание, что хотя divs уже присутствуют в контейнере, они невидимы, и это зависит только от выбора соответствующего 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 код выравнивания и отображения данных на следующей панели

ответ

Смежные вопросы