Question

我的代码通过点击首先我必须显示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>

任何人都可以帮助我

Answer 1

最初隐藏其中一个面板并保留对当前显示的面板的引用。单击其中一个链接后，您只需访问当前显示的面板并将其隐藏。

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

DEMO

Answer 2

<强> DEMO

您可以使用class隐藏其他面板

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';
}

HTML：

<div class="panel" id="MainContent_pnl">first</div>
<div class="panel" id="MainContent_Panel1">second</div>

Answer 3

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

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

3 个答案: