Bootstrap 4でのタブページ分割について。

Question

Bootstrap 4 （正式版）を使用して、
以下のようにタブページを作成しております。

<ul class="nav nav-tabs nav-justified nav-pills">

        <li class="nav-item">
            <a href="#tab1" class="nav-link active" data-toggle="tab">AA管理</a>
        </li>
        <li class="nav-item">
            <a href="#tab2" class="nav-link" data-toggle="tab">BB管理</a>
        </li>
        <li class="nav-item active" >
            <a href="#tab3" class="nav-link" data-toggle="tab">CC管理</a>
        </li>
        <li class="nav-item">
            <a href="#tab4" class="nav-link" data-toggle="tab">DD管理</a>
        </li>

    </ul>

    <div id="myTabContent" class="tab-content">

        <div class="tab-pane active" id="tab1">
            <div class="card border-primary">
                <div class="card-header bg-primary text-white">
                    AA管理
                </div>
                <div class="card-body">
                    AA管理タブ内容
                </div>
            </div>
        </div>

....略

AA管理タブをクリック後、
<a href="#tab1"

<a href="http://www.xxx.zzz" >

等に
別VIEW（AA管理タブ内容を別URL）にしたいのですが、そのようなことは可能でしょうか？

Answer 1

同じドメイン内のURLならば、タブのイベントをとって内容を書き換えたらよいのでは？

【Navs · Bootstrap】
https://getbootstrap.com/docs/4.0/components/navs/#events

【BootstrapのTabsのイベントを取得する - Qiita】
https://qiita.com/imai/items/3e0e4c2fe004cede4037

Comments

[hrsi_teratail]

すいません、あまり理解できていないのですが、
$(e.target).attr("href", "http://localhost/top");
と書き換えてもそこのページが表示されません。

何か間違っていますでしょうか？

[kei344]

＞ 何か間違っていますでしょうか？
そうですね、タブの要素にhref属性を付けているだけですね。

JavaScriptでのHTMLの書き換えや、Ajaxとかがわからないと、実現しようとされていることはできません。

【こわくないAjax - HTTPの仕組み | CodeGrid】
https://app.codegrid.net/entry/ajax-1

【jQuery.ajax()のまとめ: 小粋空間】
http://www.koikikukan.com/archives/2012/10/02-005555.php

Webの情報は「体系立てた情報」で無いことが多いので、一度本屋で何冊か本を買って読むと言う方法が良いと思います。

[hrsi_teratail]

そうですね。Ajaxについて色々調べてみることにします。
ありがとうございます。