Bootstrapのサイドメニューにハイライト表示されるように、activeを付与したいです

Question

前提・実現したいこと

Bootstrapでサイドメニューを作って、現在位置をハイライト表示（li class="active"）といったように、activeを付与したいです。

発生している問題・エラーメッセージ

クリックしてもactiveが付与されないので、ハイライト表示がされません。

該当のソースコード

<ul class="nav nav-stacked">
	<li><a href="#1">submenu1</a></li>
	<li><a href="#2">submenu2</a></li>
	<li><a href="#3">submenu3</a></li>
</ul>

試したこと

入門書を見ると、最初からliのclassに、activeが記載されているため、ハイライト表示されます。
しかし、実際はactiveは可変で表示されると思うため、activeを消して動かしたところ、ハイライト表示はされなくなりました。
どうすれば、activeが表示されるようになるのか方法をご教授いただけると助かります。

補足情報（FW/ツールのバージョンなど）

上記を試す際に読み込んだファイルは下記です。

<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

Answer 1

$(function(){
    $("ul.nav li a").on('click', function(){
        $('ul.nav li').removeClass('active');
        $(this).parents('li').addClass('active');
    });
});

気まぐれに、「丸投げ質問」に回答してみました。

Answer 2

data-toggle="pill" または data-toggle="tab" をつけることによってスクリプトを書かずに動かすことができます。

<ul class="nav nav-pills nav-stacked">
    <li><a href="#1" data-toggle="pill">submenu1</a></li>
    <li><a href="#2" data-toggle="pill">submenu2</a></li>
    <li><a href="#3" data-toggle="pill">submenu3</a></li>
</ul>

https://getbootstrap.com/docs/3.3/javascript/#markup

なお、バージョン4で書き方が変わっています(flex-columnなど)。
https://getbootstrap.com/docs/4.1/components/navs/#javascript-behavior