如何在li點擊時顯示差異面板

我想單擊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>

請幫我做這件事......

來源

2012-03-22 FDO

寫出的onclick功能li和發送面板的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>

來源

2012-03-22 09:01:59

非常感謝您的快速回復。 – FDO 2012-03-22 09:45:51

也謝謝您，請投票給我的回答。 – 2012-03-22 09:48:08

您可以通過一點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>

來源

2012-03-22 09:45:21 nightshifted

如何在li點擊時顯示差異面板

回答

相關問題