Question

使用jQuery，如何动态添加href和id属性以将菜单项按顺序链接到下面代码中的部分？

<body>
  <nav>
    <ul>
      <li><a>nav1</a></li>
      <li><a>nav2</a></li>
      <li><a>nav3</a></li> 
    </ul>
  </nav>
  <section class="main-section"></section>
  <section class="main-section"></section>
  <section class="main-section"></section>
</body>

它应该看起来像这样。

<body>
  <nav>
    <ul>
      <li><a href="#id1">nav1</a></li>
      <li><a href="#id2">nav2</a></li>
      <li><a href="#id3">nav3</a></li> 
    </ul>
  </nav>
  <section id="id1" class="main-section"></section>
  <section id="id2" class="main-section"></section>
  <section id="id3" class="main-section"></section>
</body>

Answer 1

你可以试试这个......

Fiddle

Html：

<ul>

</ul>
</nav>
<div id='addMore'>
</div>

<button id='btn'>add section and link</button>

Jquery：

var count = 0;

$('#btn').click(function(){
$('#addMore').append('<section id="id'+ count+'" class="main-section"></section>');

$('nav ul').append('<li><a href="id'+ count+'">nav'+count+'</a></li>');
count++;
});

请根据您的要求告诉我......

快乐的编码......

Answer 2

这个怎么样：首先构建你的字符串

var sections ="";
var list = "<ul>";
for(var i=0; i < 3; i++)
{
   list += '<li><a href="#id'+i+'">nav'+i+'</a></li>';
   sections += '<section id="id'+i+'" class="main-section"></section>';
}
list += "</ul>"

然后将它们添加到：

$('nav').html(list );
$('#container').html(sections);

Answer 3

您可以尝试此解决方案：

根据nav元素
动态地将id添加到body中的section

似乎已经存在var bookSection = bookView.section.book_view; // Top container var topSection = bookSection.section.top_container; topSection.expect.element('@lib_view').to.be.present;元素，然后解决方案是找到nav元素长度（用于创建部分），然后在现有a或{{1}之后插入新创建的元素}。希望这有帮助。

<强> HTML

section

<强>的jQuery

nav

<强> DEMO

Answer 4

以下是JSFIDDLE

var totalLists = 4;
var listitems='';
var sectionitems='';
$(document).ready(function(){

    for(var i = 1; i<= totalLists; i++){
        listitems = listitems+'<li><a href="#id'+i+'">nav'+i+'</a></li>';
        sectionitems=sectionitems+'<section id="id'+i+'" class="main-section"></section>'
    }
    $("#navlists").append(listitems);
    $("#section").append(sectionitems);

});

Answer 5

您可以遍历链接，然后根据链接的索引分配常见的href和id值。

在设置属性之前检查该部分是否存在。

＆＃13;

var sections = $('section.main-section');
$('nav a').each(function(index){ 
    if(sections.eq(index).length) {
        $(this).attr('href','#section' + index);
        sections.eq(index).attr('id','section' + index);
    }
})

＆＃13;

/* This CSS is for demo purposes only */                                          html, body { margin: 0; height: 100%; } .main-section { height: 100%; } ul,li { padding: 0; margin: 0; } ul { position: fixed; } li { display: inline-block; } #section0 { background: rgb(150,200,250); } #section1 { background: rgb(250,200,150); } #section2 { background: rgb(150,250,200); }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
    <ul>
        <li><a>nav1</a></li>
        <li><a>nav2</a></li>
        <li><a>nav3</a></li>
        <li><a>nav4</a></li> <!-- This will not change because 
                                  there is no fourth section -->
    </ul>
</nav>
<section class="main-section"></section>
<section class="main-section"></section>
<section class="main-section"></section>

＆＃13;

如何将菜单项动态链接到节

5 个答案: