javascript - Bootstrap 4硬链接选项卡(Bootstrap 4 Hard Linking Tabs)

Question

I am looking to create links to specific Bootstrap 4 tabs but don't seem to be able to get it to work.

(我正在寻找创建指向特定Bootstrap 4选项卡的链接，但似乎无法使其正常工作。)

I need them to be able to work externally as well as internally.

(我需要他们能够在内部和外部进行工作。)

I have tried numerous sources to try and help but to no avail.

(我已经尝试了无数资源来尝试和帮助，但都无济于事。)

A couple of the specific ones on here I have tried include:

(我在这里尝试过的一些具体方法包括：)

• Bootstrap 4 - Link to specific tab

  (Bootstrap 4-链接到特定选项卡)

• Bootstrap 4 Tab link out from navbar

  (Bootstrap 4 Tab链接从导航栏退出)

Among many others outside of stackoverflow.

(除了stackoverflow之外，还有许多其他功能。)

The code I am struggling with is:

(我正在努力的代码是：)

<div class="container" style="padding-top:15px">
  <h1>Players's Profile</h1>

  <hr />

  <ul class="nav nav-tabs nav-justified" role="tablist" id="profile">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#stats"><b>Stats</b></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#rankings"><b>Rankings</b></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#custom"><b>Customisation</b></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#account"><b>Account</b></a>
    </li>
  </ul>
</div>

  <div class="tab-content">
    <div id="stats" class="container tab-pane active"><br>
        <h4 style="color:#348FFF">Resources</h4>
        <p style="padding-bottom:10px;">Description here.</p>
            <table class="table table-striped">
                <tbody>
                    <tr>
                        <td>I have a table in tab 1</td>
                    </tr>
                </tbody>
            </table>

    <div id="rankings" class="container tab-pane fade"><br>
        <h4 style="color:#348FFF" class="pb-2">Global Ranks</h4>
            <table class="table table-striped">
                <tbody>
                    <tr>
                        <td>I have another table in tab 2</td>
                    </tr>
                </tbody>
            </table>
    </div>

    <div id="custom" class="container tab-pane fade"><br>
        <h4 style="color:#348FFF" class="pb-2">Profile Picture</h4>
            <table class="table table-striped">
                <tbody>
                    <tr>
                        <td>I have another table in tab 3</td>
                    </tr>
                </tbody>
            </table>
    </div>

    <div id="account" class="container tab-pane fade"><br>
        <h4 style="color:#348FFF" class="pb-2">Registered Details</h4>
            <table class="table table-striped">
                <tbody>
                    <tr>
                        <td>And one final table in tab 4</td>
                    </tr>
                </tbody>
            </table>
    </div>

    </div>
</div>

I understand the best approach would be some sort of Javascript but JS is not a language I know very well at all.

(我知道最好的方法是某种Javascript，但是JS并不是我所熟知的语言。)

The HTML above is also on a page sharing a lot of php elements, however none of these should be causing any conflicts between the bootstrap tabs I am using and the JS codes I have tried so far.

(上面的HTML还在共享许多php元素的页面上，但是这些都不应该引起我正在使用的引导程序选项卡和到目前为止我尝试过的JS代码之间的任何冲突。)

  ask by LionHeart-Nerd translate from so

Answer 1

等待大神答复