中心布局与填充以用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

回答

相关问题