<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>下拉菜单--属性声明式方法（一）</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
.scrollspy-example{
height:500px;
font-size:20px;
overflow:auto;
}
</style>
</head>
<body
>
<div class="bs-docs-section">
<h1 class="page-header" id="scrollspy">ScrollSpy <small>scrollspy.js</small></h1>
<h2 id="scrollspy-examples">Example in navbar</h2>
<p>The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.</p>
<div class="bs-example">
<nav role="navigation" class="navbar navbar-default navbar-static" id="navbar-example2">
<div class="container-fluid">
<div class="navbar-header">
<button
data-target=".bs-example-js-navbar-scrollspy" data-toggle="collapse" type="button" class="navbar-toggle collapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
//button部分的效果是：点击Toggle navigation页面将跳转到首页
<a href="#" class="navbar-brand">Project Name</a>
</div>
<div class="collapse navbar-collapse
bs-example-js-navbar-scrollspy">
<ul class="nav navbar-nav">
<li><a href="#fat">@fat</a></li>
<li><a href="#mdo">@mdo</a></li>
//href的值应与所连接内容的id相一致
<li class="dropdown">
<a aria-expanded="false" role="button" data-toggle="dropdown" class="dropdown-toggle" id="navbarDrop1" href="#">Dropdown <span class="caret"></span></a>
<ul aria-labelledby="navbarDrop1" role="menu" class="dropdown-menu">
<li><a tabindex="-1" href="#one">one</a></li>
<li><a tabindex="-1" href="#two">two</a></li>
//此处href同上
<li class="divider"></li>
//添加一条下划线
<li><a tabindex="-1" href="#three">three</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
//底下为所连接的内容
<div class="scrollspy-example" data-offset="0" data-target="#navbar-example2" data-spy="scroll">
<h4 id="fat">@fat</h4>
<p>.......</p>
<h4 id="mdo">@mdo</h4>
<p>.......</p>
<h4 id="one">one</h4>
<p>.........</p>
<h4 id="two">two</h4>
<p>........</p>
<h4 id="three">three</h4>
<p>.......</p>
<p>......</p>
</div>
</div><!-- /example -->
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-dropdown.min.js"></script>
</body>
</html>
