动态按钮链接到动态框的div或iframe容器

Question

简而言之，我不清楚动态html或.js或ajax或.as是如何工作的，但是，在许多具有动态内容的网站上使用iframe或divisions（<div>）。基本上，有三个按钮（div的w：150px h：30px）与一个盒子（iframe或div）在一条直线上。如果你点击按钮之一，它下面的框将改变为不同的内容，而不用实际改变页面或重新加载整个页面。我的问题是如何成功地做到这一点？

感谢您花时间阅读和/或回答我的问题！

有一个伟大的日子，

布兰

车身宽度为800像素高度为100％ 我头和脚都在高度50像素和主体高度大约为2400px。在主体中，我有另一个宽度为700px，容器左右两边为50px的容器。里面有两个框，分别是column1和column2。 Column1保存代表我的图像，其宽度为300px，高度为300px，不一定是图像本身的确切大小。另一列2是400px：w乘300px：h。它被分解成几部分，底部有一个400px：w×30px：h的容器。这已被分解成4个部分，每部分宽度为100px。这房子我的动态按钮。在列下方，div是一个独立的部门，用于保存将会改变的内容。我将它设置为与主容器相同的属性（w：700px h：400px margin-left/right：50px）。这就是我陷入困境的地方，我已经在HTML中使用了Google动态内容的Google教程，但是我还没有找到我期待的内容。一切都是花哨和高级的加载屏幕和移动图像，而不是。我只想点击更改不刷新，如果这是有道理的。

Answer 1

下面是一个使用JavaScript的jQuery插件的简单示例。你可以用普通的JavaScript来做到这一点，但是这需要更多的工作。

<input class="btn" type="button" id="A" value="A"> 
<input class="btn" type="button" id="B" value="B"> 
<input class="btn" type="button" id="C" value="C"> 
<div class="lower A">A</div> 
<div class="lower B" style="display:none">B</div> 
<div class="lower C" style="display:none">C</div> 

JS：

$('.btn').click(function() { 
    $('.lower').hide()  <-- this hides everything with a class of "lower" 
    $('.'+ $(this).attr('id')).show() <--- this grabs the ID of the button and shows everything that has a class matching the ID 
}) 

Answer 2

为了得到你需要拉这个数据从数据库或其它网站或使用AJAX另一个网页的动态内容。我推荐阅读和learning JQuery，因为它非常简单，像其他任何语言一样，遵循逻辑流程。 JQuery的语法也很简单，所以它不应该太难拾取。但我离题了。

如果你的HTML结构如下：

<div id="container"> 
    <div id="panel1" class="panel"> 
     <a href="#" class="button" id="btn-1">Button 1</a> 
     <div id="iframe-1"></div> 
    </div> 
    <div id="panel1" class="panel"> 
     <a href="#" class="button" id="btn-2">Button 2</a> 
     <div id="iframe-2"></div> 
    </div> 
    <div id="panel1" class="panel"> 
     <a href="#" class="button" id="btn-3">Button 3</a> 
     <div id="iframe-3"></div> 
    </div> 
</div> 

和你的CSS大致是这样的：使用jQuery

.panel{ 
    float:left; 
} 

/* Initially hide all iframe divs */ 
.panel > div{ 
    display:none 
} 

/* Initially show only the first iframe div */ 
.panel > div:first-child{ 
    display:block; 
} 

，你可以使用：

//Run the code after the elements of the page have been downloaded. This is usually how most JQuery syntax starts. 
$(document).ready(function(){ 
    //When the button is clicked, run a function 
    $('.button').click(function(e){ 
     e.preventDefault(); //Prevents default click behavior; similar to defining onclick='return false;' in the <a /> tag. 
     $('.button').siblings('div').hide(); //Hide all open iframe divs 
     $(this).siblings('div').show(); //Show the iframe div corresponding to clicked link 
     var id = $(this).attr('id').replace('btn-','iframe-'); //Get the ID of the link clicked and replace 'btn-' with 'iframe-' 
     $('#'+id).load('http://<url of the page you want to load>'); //Load the new web page or content into the iframe div. This could be an absolute or relative path. 
    }); 
}); 

到类似.load()功能，也有.ajax()这个功能更多全面。另外请记住，Javascript的工作原理是它在客户端计算机上编译，并且在加载页面时运行一次。因此，当获取正被添加到页面的HTML的动态数据时，需要为新内容重新加载诸如点击，悬停等任何动作。您需要使用JQuery的.on()或.delegate()事件。

希望这会有所帮助。