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

Question

简而言之，我不知道动态 html 或 .js 或 ajax 或 .as 究竟是如何工作的，但是，我在许多使用 iframe 或分割 (<div>) 的动态内容网站上看到了。基本上，三个按钮（div 为 w:150px h:30px）在一条直线上，下方有一个框（iframe 或 div）。如果您单击按钮一，它下面的框将更改为不同的内容，而无需实际更改页面或重新加载整个页面。我的问题是如何成功地做到这一点？

感谢您抽出宝贵时间阅读和/或回答我的问题！

祝你有美好的一天，

布兰

body 宽度为 800px 高度为 100% 我的头部和脚部高度均为 50 像素，主体高度约为 2400 像素。在主体中，我有另一个容器，宽度为 700 像素，左右边距为 50 像素。里面有两个浮动到左侧的框，称为 column1 和 column2。 Column1 包含代表我的图像，其宽度为 300 像素，高度为 300 像素，不一定是图像本身的确切大小。另一列 2 是 400px:w x 300px:h。它被分成几部分，在底部有一个 400px:w x 30px:h 的容器。这已被分成 4 个部分，每个部分的宽度为 100 像素。这包含我的动态按钮。在列下方，该 div 是一个单独的分区，用于保存将要更改的内容。我将其设置为与主容器相同的属性（w:700px h:400px margin-left/right:50px）。这就是我卡住的地方，我在 Google 上搜索了有关 HTML 中动态内容的教程，但我还没有找到我想要的东西。加载屏幕和移动图像等等，一切都是花哨和先进的。如果有任何意义，我只想单击更改不刷新。

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 大致如下：

.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;
}

使用JQuery，你可以使用：

//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() 事件。

希望这会有所帮助。