Как показать панель сравнения при щелчке - PullRequest
Новая
       4

Как показать панель сравнения при щелчке

0 голосов
/ 22 марта 2012

Я хочу показать другую панель, когда я щелкаю элемент списка HTML. Я использую меню с пунктом списка, имеющим четыре списка, и также имею четыре панели. я хочу показать панель при щелчке меню li ..

Мой частичный код здесь .. 

  <ul id="menulist1"> 
     <li><a href="#">General Info</a></li> // show pan_genral
     <li><a href="#">Contact Info</a></li> // show pan_contact
     <li><a href="#">Job Info</a></li>     // show pan_job
     <li><a href="#">Qualification</a></li>// show pan_Quali
  </ul>


 <asp:Panel ID="pan_contact" runat="server" Height="388px" Visible="false">
  <table border="0" cellpadding="2px" cellspacing="4px"  width="100%">
   <tr>
       <td>contact</td>
   </tr>
  </table>
 </asp:Panel>

, пожалуйста, помогите мне сделать это ...

Ответы [ 2 ]

2 голосов
/ 22 марта 2012

Напишите функцию onclick для li и отправьте идентификатор панели для показа, как этот код: 

    <ul id="menulist1">
       <li><a href="#" onclick="showPanel("pan_genral")">General Info</a></li>
       <li><a href="#" onclick="showPanel("pan_contact")">ContactInfo</a></li>
       <li><a href="#" onclick="showPanel("pan_job")">Job Info</a></li> 
       <li><a href="#" onclick="showPanel("pan_Quali")">Qualification</a></li> 
    </ul> 

     <script>
        function showPanel(panId)
       {
          var panel=document.getElementById(panId)
          panel.style.display="";
       }    
     </script>

для панели, не используйте visible=false, но используйте: style="display:none" 

    <asp:Panel ID="pan_contact" runat="server" Height="388px" style="display:none">
        <table border="0" cellpadding="2px" cellspacing="4px"  width="100%"> 
           <tr> 
             <td>contact</td> 
           </tr> 
        </table> 
     </asp:Panel>
0 голосов
/ 22 марта 2012

Этого можно добиться с помощью небольшого количества JavaScript, но учтите, что если вы используете главную страницу, ContentPlaceholderID добавляется перед идентификатором панели.Например, если ваш ContentPlaceholderID равен MainContent, вам понадобится что-то вроде этого: 

function showPanel(panelId) {
    var panel = document.getElementById("MainContent_" + panelId);
    panel.style.display = 'block';
}

Но, как и в предыдущих состояниях ответа, используйте style="display:none" вместо Visible=false на панели, чтобы это работало.

Если вы хотите, чтобы пули также вызывали срабатывание панели, переместите onclick к тегу li. 

<li onclick="showPanel('pan_contact')">Contact Info</li>
...