Javascript 我想在单击HTML列表项时显示不同的面板

我的代码 首先单击，我必须显示pnl，我必须隐藏panel1 通过点击第二个，我必须做相反的事情

<ul class="pager">
    <li class="previous"  onclick="showPanel('pnl')"><a href="#">Today's Action Items</a> </li>
    <li class="next" onclick="showPanel('Panel1')"><a href="#" >All Pending Action Items</a> </li>
  </ul>
    <script>
        function showPanel(panId)
        {
            var panel = document.getElementById("MainContent_" + panId)
            panel.style.display='block';
        }
 </script>

功能显示面板（panId）
{
var panel=document.getElementById（“MainContent_u2;”+panId）
panel.style.display='block'；
}

---

在这方面，有人能帮我吗？

首先隐藏其中一个面板，并保留对当前显示面板的引用。单击其中一个链接时，您可以访问当前显示的面板并将其隐藏

(function() {
   var panel;

   window.showPanel = function(panId) {
       if (panel) { // hide currently shown panel
           panel.style.display = 'none';
       }
       panel = document.getElementById("MainContent_" + panId)
       panel.style.display = 'block';
   };
}());

我使用立即调用函数表达式只是为了避免在全局范围内定义

panel

您可以使用

类

隐藏其他面板

function showPanel(panId)
{
   var panels = document.getElementsByClassName("panel");
   for(var i = 0; i < panels.length; i++)
   {
      panels.item(i).style.display='none';
   }
   var panel = document.getElementById("MainContent_" + panId);
   panel.style.display='block';
}

功能显示面板（panId）
{
var panels=document.getElementsByClassName（“panel”）；
对于（变量i=0；i

html:

首先
第二

功能显示面板（panId）
{
var getAllPanels=document.getElementsByClassName（“panels”）；/*获取具有类面板的所有元素*/
对于（var i=0；我可以使用jquery吗？很简单。$（“元素”）。toggle（）可以帮助您编辑jqueryEdited，因为您可能已经将jquery库用于$。我前面使用javascript for loop放置的每个循环都适用于您：）
<div class="panel" id="MainContent_pnl">first</div>
<div class="panel" id="MainContent_Panel1">second</div>

<script>
    function showPanel(panId)
    {
      var getAllPanels = document.getElementsByClassName("panels"); /*get All element having class panels*/
      for(var i=0; i<getAllPanels.length;i++)
      {
        if(getAllPanels.item(i).id=='panId')
        {
          getAllPanels.item(i).style.display='block';
        }else{
          getAllPanels.item(i).style.display='none'; 
        }
     }

    }

      <ul class="pager">
        <li class="previous panels" id='pnl' onclick="showPanel('pnl')"><a href="#">Today's Action Items</a> </li>
         <li class="next panels" id='Panel1' onclick="showPanel('Panel1')"><a href="#" >All Pending Action Items</a> </li>
</ul>