隐藏（）的点击按钮

-3

后的jquery不工作我有两个按钮的方法，其中一个按钮即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。

来源

2012-11-16 Little bird

什么情况是，所有的元素都拿出来看时，用切缘阳性的唯一元素被隐藏。这种定位策略有充分的理由吗？ –

你的代码很难理解：尽量减少css的使用（绝对位置和负边距通常是一个不好的做法）。简化所有这些东西，你会发现它会解决你的bug（这实际上是一个css问题，因为负边际） –

实际上我并没有意识到负边际会把我拖到这些问题上。反正我学到了一个新东西今天虽然我是IT行业的新手。 Thanx很多:) –

<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-16 11:01:07 m3ct0n

下面是一个简单的代码：它不是完美的，但我试图保持代码的理念。它修复了由于使用负边距和绝对定位造成的问题。 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>

来源

2012-11-16 11:01:02

谢谢大家。他在为我开火。但我有更多的问题。 http://stackoverflow.com/questions/13410646/dialog-box-remains-open-after-redirect-to-another-page –

隐藏（）的点击按钮

回答

相关问题