Bootstrap4のタブがactiveになりません

Bootstrap4でタブを入れていますが、ページ遷移した際にactive（開きっぱなし）になりません。
どうも、リンクしているfont-kahen.jsというjavascriptと競合しているようです。
回避策はありますでしょうか。コードを貼っておきます。
よろしくお願いいたします。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8">
5	<meta http-equiv="X-UA-Compatible" content="IE=edge">
6	<meta name="viewport" content="width=device-width, initial-scale=1">
7    <title>Untitled Document</title>	 
8<link href="../../../../../css/bootstrap-4.4.1.css" rel="stylesheet">
9<link href="../../../../../css/meishidai-style.css" rel="stylesheet">
10  </head>
11  <body>
12<nav>
13  <div class="nav nav-tabs" id="nav-tab" role="tablist">
14    <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
15    <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
16    <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
17  </div>
18</nav>
19<div class="tab-content" id="nav-tabContent">
20  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">1111111</div>
21  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">222222</div>
22  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">3333333</div>
23</div>
24<script src="../../../../../js/jquery-3.4.1.min.js"></script> 
25<script src="../../../../../js/popper.min.js"></script> 
26<script src="../../../../../js/font-kahen.js"></script> 
27<script src="../../../../../js/bootstrap-4.4.1.js"></script>
28<script src="../../../../../js/lightbox-plus-jquery.min.js"></script> 
29  </body>
30</html>

JS
1$(function(){
2  function initFontSize() {
3    var size = (sessionStorage.getItem('fontSize'))? sessionStorage.getItem('fontSize') : '16';
4    changeFontSize(size);
5  }
6  
7  function changeFontSize(size){
8    $('html').css('font-size', size + 'px');
9    $('[data-font!=' + size + ']').removeClass('active');
10    $('[data-font=' + size + ']').addClass('active');
11    sessionStorage.setItem('fontSize', size);
12  }
13  
14  function addListeners() {
15    $('[data-font]').on('click', function(){
16      changeFontSize($(this).data('font'));
17    });
18  }
19  
20  function init() {
21    initFontSize();
22    addListeners();
23  }
24  
25  init();
26});// JavaScript Docu

Lhankor_Mhy

2020/07/28 06:07

「ページ遷移した際」とは、具体的にはどのような操作をしたときのことですか？

keizzz15

2020/07/28 06:30

すみません、ページ遷移と書きましたが、普通にページにアクセスする操作です。よろしくお願いいたします。

Lhankor_Mhy

2020/07/28 06:47

普通にこのページを開いたときに、activeクラスがついている要素が表示されていない、ということでいいですか？

keizzz15

2020/07/28 06:50

その通りでございます。

Lhankor_Mhy

2020/07/28 07:06

font-kahen.js はご自分で書かれたものですか？　コードの変更はできますか？

keizzz15

2020/07/28 07:09

以下サイトよりコピペし、ファイル名は自分で付けました。 https://note.com/oceant/n/n8acb0edb665a

Lhankor_Mhy

2020/07/28 07:35

ありがとうございます。問題を把握しました。

行動規範の内容に同意します

回答1件

ベストアンサー

スクリプトの影響範囲を限定すればいいかと思いました

js
1//    $('[data-font!=' + size + ']').removeClass('active');
2//    $('[data-font=' + size + ']').addClass('active');
3      $('[data-font][data-font!=' + size + ']').removeClass('active');
4      $('[data-font][data-font=' + size + ']').addClass('active');