[解決済み] Bootstrap navbarのActive Stateが機能しない

質問

bootstrap v3を持っています。

私は class="active" の上に navbar で、メニュー項目を押しても切り替わりません。 私は、この方法を jQuery を使ってクリック機能を作る方法は知っていますが、この機能はブートストラップに含まれているはずだと思うのですが？ ということは、JavaScriptの問題なのでしょうか？

これが私のヘッダーで、私が含めたjs/css/bootstrapのファイルです。

<!-- Bootstrap CSS -->
<link rel="stylesheet" href= "/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href= "/stylesheets/styles.css" />

<!--jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

<!-- Bootstrap JS -->
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script src="/bootstrap/js/bootstrap-collapse.js"></script>
<script src="/bootstrap/js/bootstrap-transition.js"></script>

ここで、私の navbar のコードです。

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbarCollapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <a class="navbar-brand" href="/index.php">MyBrand</a>
            </div>

            <div class="collapse navbar-collapse navbarCollapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active">
                        <a href="/index.php">Home</a>
                    </li>

                    <li>
                        <a href="/index2.php"> Links</a>
                    </li>

                    <li>
                        <a href="/history.php">About</a>
                    </li>
                    <li>
                        <a href="/contact.php">Contact</a>
                    </li>

                    <li>
                        <a href="/login.php">Login</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

この設定は正しいですか？

(関係ない話ですが、関連する可能性は？メニューがモバイルになったとき、メニューボタンをクリックすると折りたたまれてしまいます。 しかし、もう一度押しても折りたたまれません。 この問題と、もう一つの問題は、どちらも間違ったJavaScriptの設定を意味しているのでしょうか?）

どのように解決するのですか？

ドキュメントに記載があるにもかかわらず、minified Bootstrap js ファイルと collapse/transition プラグインをインクルードしています。

bootstrap.jsとbootstrap.min.jsの両方は、単一のファイルにすべてのプラグインを含んでいます。

1つだけを含めます。

と

単純なトランジション効果であれば、transition.jsを他のJSファイルと一緒に一度だけインクルードします。 を他の JS ファイルと一緒にインクルードします。もし、コンパイルされた（またはミニマイズされた） bootstrap.jsを使用している場合、これをインクルードする必要はありません。

ということは、最小化の問題については、それがあなたの問題である可能性が十分にあります。

アクティブクラスについては、自分で管理する必要がありますが、1、2行で済みます。

Bootstrap3です。

$(".nav a").on("click", function(){
   $(".nav").find(".active").removeClass("active");
   $(this).parent().addClass("active");
});

ブートパイプ http://www.bootply.com/IsRfOyf0f9

Bootstrap4です。

$(".nav .nav-link").on("click", function(){
   $(".nav").find(".active").removeClass("active");
   $(this).addClass("active");
});