单击时如何显示差异面板答案

【问题标题】：How to show the diff panel when li click单击时如何显示差异面板
【发布时间】：2012-03-22 07:52:59
【问题描述】：

我想在单击 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>

请帮我做这件事...

【问题讨论】：

标签： c# asp.net panel

【解决方案1】：

为li编写onclick函数并发送面板的id来显示，如下代码：

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

【讨论】：

【解决方案2】：

您可以使用一些 javascript 来实现这一点，但请注意，如果您使用的是母版页，则 ContentPlaceholderID 会添加到面板 ID 的前面。例如，如果您的 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>

【讨论】：