Question

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

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

祝你有个美好的一天，

布兰

体宽为800px，高度为100％我的头和脚的高度均为50px，主体的高度约为2400px。在主体中，我有另一个容器，宽度为700像素，左右为50像素。左侧浮动有两个框，名为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）。这就是我被困住的地方，我在谷歌上搜索了关于动态内容的教程，但我还没有找到我想要的东西。一切都是花哨和先进的加载屏幕和移动图像，什么不是。我只是想点击更改没有刷新，如果这有任何意义。

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

希望这有帮助。

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

2 个答案: