基于部分标签的动态导航栏

Question

如果我使用<section> 作为保存不同页面的一种方式，我正在构建一个动态单页网站。然后使用 jquery 我隐藏每个部分，直到单击链接。我可以通过显式添加链接和部分来完成这项工作，但我的问题是尝试使用 jquery 循环使其动态化。

这些是我需要链接在输出时的外观：

<ul class="nav navbar-nav">
  <li data-index="1"><a href="#">About</a></li>
  <li data-index="2"><a href="#">Multiple Choice</a></li>
  <li data-index="3"><a href="#">Contact</a></li>
</ul>

这是根据点击的链接隐藏和显示部分的 jquery：

  $('.nav li').click(function(){
        var index = $(this).attr('data-index');
        $('.content').hide();
        $('section[data-index="'+index+'"]').show();
        $('h1').addClass('animated bounce');
  });

现在我遇到了麻烦，使用 jQuery 动态构建导航栏。这是我目前所拥有的：

我创建了实际的导航栏结构：

var nav = '<nav class="navbar navbar-fixed-bottom navbar-inverse" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#" data-target="0" id="scroll">Thinking Cap Create</a> </div> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav">  </ul> </div> </div> </nav>'

然后我将导航栏附加到正文：

$('body').append(nav);

但现在事情变得很奇怪。我尝试根据页面上有多少部分创建一个循环，并将每个链接增加 1。

$('section').each(function(i,v) { if(i < $('section').length) { var nav = $('<li data-index="'+(i)+'><a href="#"' + ($(this).children().attr('name'))+'</li>'); $('.nav navbar-nav').append(nav);}});

但这不起作用。任何帮助表示赞赏。

Answer 1

您的选择器$('.nav navbar-nav') 错误。应该是：

$('.nav.navbar-nav').append(nav)