javascript - 如何在单击 li 时加载 div？

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 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

假设你想在你的 li 标签中加载带有新 html 的 div，你可以遵循这个 jsfiddle http://jsfiddle.net/qaoturwz/

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