Question

点击<div>时如何加载<li>？

<ul id="courseNav">
    <li class="title"><a href="#">Overview</a></li>
    <hr style="margin-top: -0.8px">                
    <li class="topics" style="margin-top: -12px"><a href="#">Topic</a></li>
    <li class="topics"><a href="#">Topic</a></li>
    <li class="topics"><a href="#">Topic</a></li>
</ul>

当我点击<li>中的<ul>时，我希望在我的网站上加载<div>。 <div>位于另一个HTML文件中。

示例Div：

<div id="topicDiv">
                    <div class="col-sm-8 col-sm-offset-1 col-xs-12 col-xs-offset-0 col-md-8 col-md-offset-1 col-lg-8 col-lg-offset-0">
                        <h6 class="courseOptions">Topic Title</h6>
                        <br>
                        <input type="text" style="width: 380px min-width: 20px" class="form-control" name="text" id="editorText">
                        <br>
                    </div>
                </div>

Answer 1

使用YQL（以防网站没有CORS），jQuery和ajax所需的工作示例。

<ul id="courseNav">
<li class="title"><a href="#">Overview</a></li>
<hr style="margin-top: -0.8px">                
<li class="topics" style="margin-top: -12px"><a href="#">Topic</a></li>
<li class="topics"><a href="#">Topic</a></li>
<li class="topics"><a href="#">Topic</a></li>
</ul>
<div id="output"> </div>


<script>

$("li").click(function(){
             url = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22http%3A%2F%2Fstackoverflow.com%22%20and%20xpath%3D'%2F%2Fdiv%2Fh3%2Fa'&format=json"

            $.ajax({
                url: url,
                dataType: 'json',
                beforeSend: function(){},
                error: function(e){},
                complete: function(){},
                success: function( data ) {

                        var post = data.query.results.a || [];
                        if(post[0]){
                        $("#output").html("");
                        $("#output").append(post[0].content + " " + post[0].href);
                     }       
                  }
             });
        });
<script>

JSFIDDLE DEMO

Answer 2

您可以使用javascript / jquery中的ajax加载它。

捕获您的点击事件：http://api.jquery.com/click/
通过http://api.jquery.com/jquery.ajax/
将数据添加到您的网页：http://api.jquery.com/html/或http://api.jquery.com/append/

Answer 3

假设您要在li标记中加载包含新html的div，则可以按照此jsfiddle http://jsfiddle.net/qaoturwz/

我刚刚添加了一个带有一些文本的基本div，你可以从Ajax获取你的html并将其加载到你的li或页面的其他地方。

如何在点击li时加载div？

3 个答案: