Question

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

请帮我做这个......

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

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

点击时如何显示差异面板

2 个答案: