Question

我有两个按钮，其中一个按钮是Staffing，另一个按钮是NonStaffing。当我点击Staffing按钮然后我就能得到我想要的结果，这意味着我能够看到page1并隐藏page2。但是当我点击NonStaffing按钮时，我没有得到我想要的结果，这意味着隐藏page1并显示page2。它隐藏了整个页面。我无法弄清楚问题。

HTML：

<ul>
     <li class="menu-item" style="list-style-type: none;margin-left: 50px; margin-top: -120px; position: absolute;">
        <input   type="submit" name="projectType" value="Staffing" >
     </li>
    <li style="list-style-type: none;margin-left: 150px; margin-top: -120px; position: absolute;" >
        <input type="submit" name="projectType1" value="NonStaffing">
    </li>
</ul>


<div id="abc1" style="background: #CCC; height:250px;width:250px;margin-top:150px;border: 4px solid #AAA;">
   <button>Open Dialog</button>
        Page1  

</div>


<div id ="mno" style="background: #CCC; height:110px;width:150px;margin-left:410px;margin-top: -250px; border: 4px solid #AAA;"> Page2

</div>

使用Javascript：

var dialogOffset = {
    top: 50,
    left: 10
}
  $("input:submit[name=projectType1]").click(function() {
    var value = $(this).val();
    if(value=='NonStaffing'){

        $('#mno').show();
         $('#abc1').hide();


    }else{


    }
});



     $("input:submit[name=projectType]").click(function() {
                var value = $(this).val();
                    if(value=='Staffing'){
                        $('#abc1').show();
                        $('#mno').hide();
                    }else{}
                }); 



$('button').click(function() {
    var $parent = $(this).closest('div.col');
    var parentPos = $parent.offset()
    var parentIndex = $('.col').index($parent);   
    var numDialogs= $('.colDialog_'+parentIndex).length;
    var dialogTop=parentPos.top + dialogOffset.top + numDialogs*30;
    var dialogPosition = [parentPos.left + dialogOffset.left, dialogTop];
    $('<div class="colDialog_'+parentIndex+'">').dialog({      
        position:  dialogPosition,
        width: 170,
        title: 'Col:'+(parentIndex+1 +', Dia: '+(numDialogs+1)) ,
        close: function() {
            $(this).remove()
        }
    })
});

你可以找到上面代码here的JSFiddle。

Answer 1

这是一个简化的代码：它并不完美，但我试图保持代码的哲学。它解决了由于使用负边距和绝对定位造成的问题。 javascript可以是相同的......

<ul style="list-style-type: none; margin-top: 50px;">
     <li class="menu-item" style="margin-left: 50px; display: inline-block;">
        <input   type="submit" name="projectType" value="Staffing" >
     </li>
    <li style="margin-left: 50px; display: inline-block;" >
        <input type="submit" name="projectType1" value="NonStaffing">
    </li>
</ul>

<div style="margin-top:150px; position: relative;">
    <div id="abc1" style="position: absolute; background: #CCC; height:250px; width:250px; border: 4px solid #AAA;">
       <button>Open Dialog</button>
            Page1         
    </div>


    <div id ="mno" style="position: absolute; left: 350px; background: #CCC; height:110px; width:150px; border: 4px solid #AAA;"> Page2

    </div>
</div>

Answer 2

<input type="submit" class="chgpage" rel="abc1" value="Staffing" >
<input type="submit" class="chgpage" rel="mno" value="NonStaffing">
<div id="abc1" class="page" style="display:none;width:500px;height:500px;border:1px solid black;">Page1</div>
<div id ="mno" class="page" style="display:none;width:500px;height:500px;border:1px solid red;">Page2</div>


<script type="text/javascript">
     $("input.chgpage").click(function() {
         $('div.page').hide();
         $('#'+$(this).attr('rel')).show();
    });
</script>

玩得开心;）

单击按钮后，jquery的hide（）方法无效

2 个答案: