首页 | 简单教程,简单编程

代码编辑器：

<!DOCTYPE htm>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>body {margin: 0 0 0 8px}</style>
<nav id="navbar-example" 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><a href="#ios">2017-11-1</a></li>
            <li><a href="#svn">2017-11-2</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">2017-10-1</a></li>
                    <li><a href="#ejb" tabindex="-1">2017-10-2</a></li>
                    <li class="divider"></li>
                    <li><a href="#spring" tabindex="-1">2017-10-3</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div> 
</nav>
<div data-spy="scroll" data-target="#navbar-example" data-offset="0"
     style="height:200px;overflow:auto; position: relative;">
    <h4 id="ios">2017-11-1</h4>
    <p>任何一个行业，都有它的难处，但也有它的乐趣。可能乐趣很少很少，但就是这么一点点的乐趣，让我们苦中作乐，一直坚持了下来
    </p>
    <h4 id="svn">2017-11-2</h4>
    <p>有些人注定会成为一个创业者，因为他们的心里早已经播下一颗种子。在他们的一生中，总有一天，会碰到这样那样的契机，然后这颗种子就会破土而出，恣意生长，不可遏制……
    </p>
    <h4 id="jmeter">2017-10-1</h4>
    <p>一个人最好的状态，应该是毫无恐惧，万事不纠结，放手去干。总是怀念小时候，不知道天高地厚，只知道往前冲，元气满满，爱憎分明。长大了，在不知道哪天的某一个瞬间，突然发现自己开始思前想后，顾虑太多，再不快活，行为瘫痪，想说而不敢说，想做而不敢做
    </p>
    <h4 id="ejb">2017-10-2</h4>
    <p>CEO 特拉维斯·卡拉尼克几乎在尽自己所能在迎合或者说开拓这个市场：2015 年，他总共在中国待了 75 天，算上往返中美的飞行时间，这几乎能够占到工作时间的一半，他的朋友甚至开玩笑说他应该“申请加入中国国籍”；尽量与中国政府和媒体搞好关系，甚至会去参加在边远西南省份贵州举办的数博会；接受有中国背景投资机构和百度的投资；聘请中国背景深厚的柳甄作为中国的负责人
    </p>
    <h4 id="spring">2017-10-3</h4>
    <p>Uber 在中国采取的精英小分队模式通过花样频出的营销活动将优品牌和知名度打响，但发展中后期由于没有把握好市场节奏导致发展节奏过慢、客服等用户体验饱受诟病、内部管理问题集中爆发、政策关系不佳等问题，再加上遭遇到滴滴的全力狙击，这家美国公司最终以合并在中国收场
    </p>
</div>
<span id="activeitem" style="color:red;"></span>
<script>
    $(function(){
        removeSection = function(e) {
            $(e).parents(".section").remove();
            $('[data-spy="scroll"]').each(function () {
                var $spy = $(this).scrollspy('refresh')
            });
        }
        $("#navbar-example").scrollspy();
        $('#navbar-example').on('activate.bs.scrollspy', function () {
            var currentItem = $(".nav li.active > a").text();
            $("#activeitem").html("目前您正在查看 - " + currentItem);
        })
    });
</script>

代码编辑器：

运行结果：