0

我有一个表格，它采用以下代码

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

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

<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 部分，如果单击 Games，则以同样的方式加载data-id="games"。游戏的 div 部分看起来像 

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

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

希望你现在明白了！

我对javascript没有太多了解。请帮忙

4

2 回答 2

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() );

    });
});
于 2013-05-11T11:14:53.327 回答
1

您的原始问题中缺少很多相关的难题。

但不管怎么说。在您的页面上尝试此 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>
于 2013-05-11T11:15:08.397 回答