單擊li時如何加載div？

Question

單擊<li>時如何加載<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演示

Answer 2

您可以從javascript / jquery用ajax加載它。

• 在lis上捕獲click事件： 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或頁面的其他位置。