javascript - 如何使用 javascript 更改页面的 HTML 结构？

Question

我有这个网页，用于测试上面的内容。在其他 3 个单独的 HTML 文件中，我有 3 个不同的导航菜单。我想要做的是在测试页面上包含一个下拉菜单，其中包含 3 个链接。每个链接都会改变测试页面上的导航。例如，测试页面上有一个默认导航。单击下拉列表中的链接 1 将更改该导航。与链接 2 和链接 3 相同。我将如何在 JavaScript 或 jQuery 中执行此操作？

Answer 1

这应该符合您的要求。有关演示，请参阅此Fiddle。

<a id="link-1">link 1</a>
<a id="link-2">link 2</a>
<a id="link-3">link 3</a>

<div id="navigation"></div>

<div id="templates" style="display:none;">
    <div id="navigation-menu1">navigation-menu1</div>
    <div id="navigation-menu2">navigation-menu2</div>
    <div id="navigation-menu3">navigation-menu3</div>
</div>


var menu1 = $('#navigation-menu1');
var menu2 = $('#navigation-menu2');
var menu3 = $('#navigation-menu3');

$('#link-1').bind('click', function () {
    $('#navigation').empty();
    $('#navigation').append(menu1);
});
$('#link-2').bind('click', function () {
    $('#navigation').empty();
    $('#navigation').append(menu2);
});
$('#link-3').bind('click', function () {
    $('#navigation').empty();
    $('#navigation').append(menu3);
});

Answer 2

jquery 的工作方式是您使用自定义代码设置某个事件的侦听器，以便在发生这种情况时运行。这是链接的示例：

<a id="mylink" href="home.html">Go Home</a>

javascript（把它放在你的和标签之间）：

 <script type="text/javascript">
      $(document).ready(function() {
         //This code gets run when the page is finished loading
         $('a#mylink').click(function() {
              //Handle the event here
         });
     });
</script>

您还询问了如何在运行时动态更改 HTML。jQuery 对这个 .html() 有很好的功能

假设你有一些 html：

<div id="changeme">Hello</div>

下面的 jQuery：

$('#changeme').html("Goodbye");

将页面的 html 更改为以下内容

<div id="changeme">Goodbye</div>