在点击JS / JQUERY时,只显示/隐藏一个带有.show / .hide的div但不显示另一个div的Div

时间:2018-06-19 08:56:25

标签: javascript jquery html css

我在显示信息的显示面板上工作。我有一个带有一些标签like this

的面板

我成功删除了一个类,使用Jquery和JS显示该按钮是否处于活动状态,但是我没有成功显示与所选当前选项卡匹配的div。第一个标签是隐藏/显示,如果我点击它或在其他标签中,但是当我点击它们时其他标签不显示,所以我不明白为什么这只适用于我的标签之一。

这是我的代码: 工作的标签

function activeButton_1088()
{
    $('#button-1089').removeClass('x-active x-tab-active x-tab-default-active x-top-active x-tab-top-active x-tab-default-top-active').show(500);
    $('#button-1090').removeClass('x-active x-tab-active x-tab-default-active x-top-active x-tab-top-active x-tab-default-top-active').show(500);
    $('#button-1091').removeClass('x-active x-tab-active x-tab-default-active x-top-active x-tab-top-active x-tab-default-top-active').show(500);
    $('#button-1092').removeClass('x-active x-tab-active x-tab-default-active x-top-active x-tab-top-active x-tab-default-top-active').show(500);
    $('#button-1093').removeClass('x-active x-tab-active x-tab-default-active x-top-active x-tab-top-active x-tab-default-top-active').show(500);
    $('#button-1094').removeClass('x-active x-tab-active x-tab-default-active x-top-active x-tab-top-active x-tab-default-top-active').show(500);
    $('#button-1095').removeClass('x-active x-tab-active x-tab-default-active x-top-active x-tab-top-active x-tab-default-top-active').show(500);

    if ($('#button-1088').hasClass('x-active x-tab-active x-tab-default-active x-top-active x-tab-top-active x-tab-default-top-activeanier'))
    {
        alert("already on this tab !");
    }
    else
    {
        $('#button-1088').addClass('x-active x-tab-active x-tab-default-active x-top-active x-tab-top-active x-tab-default-top-active').show(500);
    }

    $('#headercontainer-1023').hide(500);
    $('#gridBaseProducts-body').hide(500);
    $('#header-user').show(1000);
    $('#gridUserData-body').show(1000);
}

以及不起作用的代码:

function activeButton_1089()
{
    $('#button-1088').removeClass('x-active x-tab-active x-tab-default-active x-top-active x-tab-top-active x-tab-default-top-active').show(500);
    $('#button-1090').removeClass('x-active x-tab-active x-tab-default-active x-top-active x-tab-top-active x-tab-default-top-active').show(500);
    $('#button-1091').removeClass('x-active x-tab-active x-tab-default-active x-top-active x-tab-top-active x-tab-default-top-active').show(500);
    $('#button-1092').removeClass('x-active x-tab-active x-tab-default-active x-top-active x-tab-top-active x-tab-default-top-active').show(500);
    $('#button-1093').removeClass('x-active x-tab-active x-tab-default-active x-top-active x-tab-top-active x-tab-default-top-active').show(500);
    $('#button-1094').removeClass('x-active x-tab-active x-tab-default-active x-top-active x-tab-top-active x-tab-default-top-active').show(500);
    $('#button-1095').removeClass('x-active x-tab-active x-tab-default-active x-top-active x-tab-top-active x-tab-default-top-active').show(500);

    if ($('#button-1089').hasClass('x-active x-tab-active x-tab-default-active x-top-active x-tab-top-active x-tab-default-top-activeanier'))
    {
        alert("Vous êtes déjà sur cette onglet !");
    }
    else
    {
        $('#button-1089').addClass('x-active x-tab-active x-tab-default-active x-top-active x-tab-top-active x-tab-default-top-active').show(500);
    }


    $('#header-user').hide(500);
    $('#gridUserData-body').hide(500);
    $('#headercontainer-1023').show(500);
    $('#gridBaseProducts-body').show(500);       
}

这里是我希望展示的DIV不起作用:

    <div id ="gridBaseProducts-body" class="x- 
      panel-body x-grid-body x-panel-body- 
      default x-panel-body-default x-layout- 
      fit">
         <div class="x-grid-view x-fit-item x-grid-view-default x-unselectable" id="gridview-1025" tabindex="-1" style="overflow: auto;"></div>
         <table class="x-grid-table x-grid- table-resizer" border="0" cellspacing="0" cellpadding="0" style="width:936px;height:1px;"> 
    <?php $compteurfood=1; ?>
           <tbody>
       <?php              
           foreach($obj_store_BP->fetchAll() as $obj_BP)
           { ?>
           <tr class="x-grid-header-row">
             <th class="x-grid-col-resizer- rownumberer-1011" style="width: 23px; height: 0px;"><?php echo $compteurfood; ?> </th>
             <th class="x-grid-col-resizer-email" style="width: 70px; height: 0px;"><?php echo "{$obj_BP->food_baseproduct}"; ?></th>
              <th class="x-grid-col-resizer-gridcolumn-1012" style="width: 95px; height: 0px;"> <?php echo "{$obj_BP->food_basec02}"; ?></th> 
   <?php $compteurfood++; ?>
              </tr>
      <?php } ?>
           </tbody>
      </table>

0 个答案:

没有答案