中心佈局與填充以用JavaScript/AJAX顯示一個div

我有一些麻煩實施這一佈局： http://deconcini.net/maurer-schneebacher/projekte/elisabethinum.html 中心佈局與填充以用JavaScript/AJAX顯示一個div

基本上我想作爲一個用戶點擊，一旦顯示與圖片的DIV的鏈接。問題是，該中心的導航是在一個容器

#maincol{ 
     width:940px; 
     padding: 0 auto; 
     border: 0px solid; 
     margin:0 auto; 
     background-color: #FFFFFF; 
     position: relative; 
     /* other attributes */ 
    }

而在div我有顯示有它自己的（灰色）backgound穿過屏幕的整個寬度達到。

爲了實現它，我不得不關閉maincol並打開一個名爲「selection」的新div，其中包含另一個名爲「container」的div，該div位於中心幷包含圖像。

 #selection { 
     background: #DDDDDD; 
     margin: 10px 0 10px 0; 
     padding: 0; 
     width: 100%; 
    } 

    .container { 
     width: 940px; 
     margin: 0 auto; 
     overflow: hidden; 
    }

在這個div之後，我重新打開了maincol。

現在我想用javascript或AJAX顯示這個div。問題是，我覺得很難關閉一個div，重新打開並再次關閉div，然後重新打開maincol div。所以我想知道是否有可能以填充爲中心整個佈局，所以我可以在那裏設置灰色背景，只需插入一個新的div與JavaScript，而無需關閉並重新打開maincol div。

我不是很有經驗的HTML，我無法在網上找到答案。所以，我將非常感激，如果有人可以給我一個提示:-)

問候

來源

2011-09-20 Mark Bernauer

只是爲了澄清，我是正確的思維，當一個鏈接被點擊，灰色框打開低於特定鏈接？所以點擊鏈接會在頁面上下移動灰色框？ – Chris

是的！究竟！它應該成爲一種手風琴:-) –

好的，我正在研究一個解決方案。儘管如此，你已經說過一些有趣的東西，你會反對有多個「選擇」框的想法嗎？你可以在每個鏈接下方都有一個灰色的div。這將比我目前的工作更容易;） – Chris

呼，還好在這裏你去：http://jsfiddle.net/chricholson/25Yew/46/

中途我意識到，你沒有指定的jQuery ，但到那時我已經差不多完成了。如果你喜歡，你可以把它翻譯成傳統的Javascript，但我會強烈推薦一個圖書館，因爲它會爲你節省很多時間。

因此，在腳本中，它會檢測已被單擊的列表項並將其從「selection」div之前/之後的列表中分別移動到列表之前/之後的列表中。這使列表保持整潔，意味着您只有中間的一個灰色框。

您可以根據需要製作動畫。

請注意，我已經簡單地設置了「選擇」框以填充單擊的列表項的內容。實際上，您可能需要在每個列表項上放置一個id，然後將內容加載到「選擇」框中，可以使用數組或ajax調用。

祝你好運！ :)

HTML：

<div id="mainCol1" class="col"> 
<ul> 
    <li>hello world 1</li> 
    <li>hello world 2</li> 
    <li>hello world 3</li> 
</ul> 
</div> 
<div id="selection"> 
    selection 
</div> 
<div id="mainCol2" class="col"> 
    <ul> 
     <li>hello world 4</li> 
     <li>hello world 5</li> 
     <li>hello world 6</li> 
    </ul>  
</div>

的Javascript（實際上的jQuery）：

$('#mainCol1 li').click(function(){ 

    var item = $('#mainCol1 li').index(this); 
    var total = $('#mainCol1 li').length - 1; 
    fillSelection($('#mainCol1 li:eq(' + item + ')').html()); 
    for(i = total; i > item; i--){ 
     $('#mainCol2 ul').prepend($('#mainCol1 li:eq(' + i + ')')); 
    } 

}); 

$('#mainCol2 li').click(function(){ 

    var item = $('#mainCol2 li').index(this); 
    var total = $('#mainCol2 li').length - 1; 
    fillSelection($('#mainCol2 li:eq(' + item + ')').html()); 
    for(i = 0; i < item; i++){ 
     $('#mainCol1 ul').append($('#mainCol2 li:eq(0)')); 
    } 


}); 

function fillSelection(html){ 
    $('#selection').text(html); 
}

來源

2011-09-20 09:56:42 Chris

非常感謝！我會試試看:-) –

中心佈局與填充以用JavaScript/AJAX顯示一個div

回答

相關問題