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)

基于节标记的动态导航栏

1 个答案: