bootstrap 多个模态框(Modal) 引用的问题

第一段
<nav class="navbar navbar-default" id="nav1">
<ul class="nav navbar-nav">
<li><a href="#html5">html5</a></li>
<li><a href="#bootstrap">bootstrap</a></li>
</ul>
</nav>
<div data-spy="scroll" data-target="#nav1">
<p id="html5">html5</p>
<p id="bootstrap"></p>
</div>
第二段
<nav class="navbar navbar-default" id="nav2">
<ul class="nav navbar-nav">
<li><a href="#html5">html5</a></li>
<li><a href="#bootstrap">bootstrap</a></li>
</ul>
</nav>
<div data-spy="scroll" data-target="#nav2">
<p id="html5">html5</p>
<p id="bootstrap"></p>
</div>
data-target="#nav2" 监听的是第二段内容，实际上监听的却是第一段