-3

我有两个按钮，其中一个按钮 ieStaffing和另一个按钮 ie 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()
        }
    })
});​

您可以在此处找到上述代码的 JSFiddle 。

4

2 回答 2

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>

​</p>

于 2012-11-16T11:01:02.907 回答
1 
<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>

玩得开心 ;）

于 2012-11-16T11:01:07.993 回答