隱藏（）的點擊按鈕

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

隱藏（）的點擊按鈕

回答

相關問題