Question

我有一个表单，其中包含以下代码

<div class="data" data-id="sports">
<div class="data-inner"></div>
</div>

我有一个包含左侧导航栏和中间内容的html页面。左侧Nav包含类别列表

<li class="nav"><?=$sports?></li>

并且容器具有以下div

<div class="container">
// js file that supports the iframe to be loaded on my page
   <div class="data" data-id="sports">
<div class="data-inner"></div>
</div>

</div>

我使用了ajax，并尝试打印单击li后返回的数据。由于正在加载的内容是html，数据（iframe）加载到导航容器而不是加载.container类

更新

    <script type="text/javascript">    
    $(function(){
        $('#order li').click(function(){
        $('.container').html('');

        alert($(this).attr("nav"));
        });
        });
</script>

因此，如果我点击体育版，则会加载与 data-id =“sports”对应的div部分，如果点击了游戏则相同 data-id =“games”将被加载。游戏的div部分看起来像

   <div class="data" data-id="games">
    <div class="data-inner"></div>
    </div>

最初我使用 iframe ，但由于iframe未正确调整，我被告知使用此代码

希望你现在明白了！

我对javascript知之甚少。请帮忙

Answer 1

根据你对你要做的事情的解释，我假设这段代码：

<li class="nav"><?=$sports?></li>

将填充您在单击li时要加载的文件名。

e.g.
<li class="nav">baseball.html</li>
<li class="nav">football.html</li>
<li class="nav">soccer.html</li>

如果是这种情况，那么当点击其中一个体育（文件名）时，此代码会将文件加载到.container中

$(function(){
    // attach click event to each li element with class "nav"
    $('li .nav').on("click", function(){
        // assuming each li will show the name of a file to load using AJAX, do this
        // load the container div with the file you just clicked on (i.e. $(this) is li ) 
        $('.container').load( $(this).text() );

    });
});

Answer 2

原始问题中缺少许多相关的谜题。

但无论如何。在您的网页上试试这个Javascript代码。至少它可以作为模板。

<script type="text/javascript">

$(function(){

    var button = $('a.nav');
    var container = $('div.container').first(); // .first() ensures that only a single div will be used, not many
    var url = 'http://www.yoursite.com/data_from_where_to_load.php';

    button.click(function(){

        var condition = confirm("Load data: Click YES for iframe, click NO for Ajax. ");

        container.html('');

        if(condition){ // load with iframe
            var iframe = $("<iframe />");
            iframe.attr('src',url).appendTo(container);
            iframe.ready(function(){
                alert('if you can see this, probably the iframe just loaded');  
            });

        }else{ // load with Ajax
            $.ajax({
                url: url, dataType:'html', complete:function(r){
                    container.html(r.responseText); 
                    alert('done loading via ajax');
                }
            });
        }

    });

});

</script>

如何在点击按钮时将html内容（不是页面）加载到div中

2 个答案: