源代碼
點擊運行
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 實例 - 滾動監聽(Scrollspy)插件事件</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <nav id="myScrollspy" class="navbar navbar-default navbar-static" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-scrollspy"> <span class="sr-only">切換導航</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">教程名稱</a> </div> <div class="collapse navbar-collapse bs-js-navbar-scrollspy"> <ul class="nav navbar-nav"> <li class="active"><a href="#ios">iOS</a></li> <li><a href="#svn">SVN</a></li> <li class="dropdown"> <a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown"> Java <b class="caret"></b> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="navbarDrop1"> <li><a href="#jmeter" tabindex="-1">jmeter</a></li> <li><a href="#ejb" tabindex="-1">ejb</a></li> <li class="divider"></li> <li><a href="#spring" tabindex="-1">spring</a></li> </ul> </li> </ul> </div> </div> </nav> <div data-spy="scroll" data-target="#myScrollspy" data-offset="0" style="height:200px;overflow:auto; position: relative;"> <div class="section"> <h4 id="ios">iOS<small><a href="#" onclick="removeSection(this);"> × 刪除該部分</a></small> </h4> <p>iOS 是一個由蘋果公司開發和發布的手機操作系統。最初是於 2007 年首次發布 iPhone、iPod Touch 和 Apple TV。iOS 派生自 OS X,它們共享 Darwin 基礎。OS X 操作系統是用在蘋果電腦上,iOS 是蘋果的移動版本。</p> </div> <div class="section"> <h4 id="svn">SVN<small></small></h4> <p>Apache Subversion,通常縮寫為 SVN,是一款開源的版本控製系統軟件。Subversion 由 CollabNet 公司在 2000 年創建。但是現在它已經發展為 Apache Software Foundation 的一個項目,因此擁有丰富的開發人員和用戶社區。</p> </div> <div class="section"> <h4 id="jmeter">jMeter<small><a href="#" onclick="removeSection(this);"> × 刪除該部分</a></small> </h4> <p>jMeter 是一款開源的測試軟件。它是 100% 純 Java 應用程序,用於負載和性能測試。</p> </div> <div class="section"> <h4 id="ejb">EJB</h4> <p>Enterprise Java Beans(EJB)是一個創建高度可擴展性和強大企業級應用程序的開發架構,部署在兼容應用程序服務器(比如 JBOSS、Web Logic 等)的 J2EE 上。</p> </div> <div class="section"> <h4 id="spring">Spring</h4> <p>Spring 框架是一個開源的 Java 平台,為快速開發功能強大的 Java 應用程序提供了完備的基礎設施支持。</p> <p>Spring 框架最初是由 Rod Johnson 編寫的,在 2003 年 6 月首次發布於 Apache 2.0 許可證下。</p> </div> </div> <span id="activeitem" style="color:red;"></span> <script type="text/javascript"> $(function(){ removeSection = function(e) { $(e).parents(".section").remove(); $('[data-spy="scroll"]').each(function () { var $spy = $(this).scrollspy('refresh') }); } $("#myScrollspy").scrollspy(); $('#myScrollspy').on('activate.bs.scrollspy', function () { var currentItem = $(".nav li.active > a").text(); $("#activeitem").html("目前您正在查看 - " + currentItem); }) }); </script> </body> </html>
運行結果