javascript - 从链接 Bootstrap 打开选项卡

Question

这里是 Javascript/jQuery 新手。这个问题以前被问过很多次，但我无法实现任何解决方案并使它们在我的单页网站上运行。我的代码如下。到目前为止，我已经尝试了以下变体(但没有成功):

• Linking to specific twitter bootstrap tabs from URL on same page
• Jump to specific tab from another tab with Bootstrap's nav-tabs
• Any way to get BootStrap tabs to be activated via the URL?
• Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink
• show tab with external link with onclick in bootstrap 3
• how to link twitter bootstrap tabs from hyper link on otherpages
• Bootstrap linking to a tab with an url
• Externally Linking to a Tab, Tab not changing, Bootstrap 3.3.5
• Go to Specific Tab on different Page link click and toggle active class

以下是我最接近的解决方案。我错过了什么？

$(document).load(function() {
  $('#section-A a').click(function(e) {
    e.preventDefault();
    $('a[href="' + $(this).attr('href') + '"]').tab('show');
  })
});

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

<section id="section-A">

  <blockquote class="blockquote">
    <p>Some text here ...
      <a href="#tab-1">Tab 1 hyperlink text</a> blablabla
      <a href="#tab-2">Tab 2 hyperlink text</a> and blabla
      <a href="#tab-3">Tab 3 hyperlink text</a> and blabla
      <a href="#tab-4">Tab 4 hyperlink text</a> and bla.
    </p>
  </blockquote>

</section>


<div id="section-B">

  <ul class="nav nav-pills">
    <li class="active"><a href="#tab-1" data-toggle="tab">Tab 1 title</a></li>
    <li class=""><a href="#tab-2" data-toggle="tab">Tab 2 title</a></li>
    <li class=""><a href="#tab-3" data-toggle="tab">Tab 3 title</a></li>
    <li class=""><a href="#tab-4" data-toggle="tab">Tab 4 title</a></li>
  </ul>

  <div class="tab-content">
    <div id="tab-1" class="tab-pane active">Tab 1 Lorem ipsum …</div>
    <div id="tab-2" class="tab-pane">Tab 2 Lorem ipsum …</div>
    <div id="tab-3" class="tab-pane">Tab 3 Lorem ipsum …</div>
    <div id="tab-4" class="tab-pane">Tab 4 Lorem ipsum …</div>
  </div>

</div>

Answer 1

将$(document).load替换为$(document).ready

$(document).ready(function() {
  $('#section-A a').click(function(e) {
    e.preventDefault();
    $('a[href="' + $(this).attr('href') + '"]').tab('show');
  })
});

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

<section id="section-A">

  <blockquote class="blockquote">
    <p>Some text here ...
      <a href="#tab-1">Tab 1 hyperlink text</a> blablabla
      <a href="#tab-2">Tab 2 hyperlink text</a> and blabla
      <a href="#tab-3">Tab 3 hyperlink text</a> and blabla
      <a href="#tab-4">Tab 4 hyperlink text</a> and bla.
    </p>
  </blockquote>

</section>


<div id="section-B">

  <ul class="nav nav-pills">
    <li class="active"><a href="#tab-1" data-toggle="tab">Tab 1 title</a></li>
    <li class=""><a href="#tab-2" data-toggle="tab">Tab 2 title</a></li>
    <li class=""><a href="#tab-3" data-toggle="tab">Tab 3 title</a></li>
    <li class=""><a href="#tab-4" data-toggle="tab">Tab 4 title</a></li>
  </ul>

  <div class="tab-content">
    <div id="tab-1" class="tab-pane active">Tab 1 Lorem ipsum …</div>
    <div id="tab-2" class="tab-pane">Tab 2 Lorem ipsum …</div>
    <div id="tab-3" class="tab-pane">Tab 3 Lorem ipsum …</div>
    <div id="tab-4" class="tab-pane">Tab 4 Lorem ipsum …</div>
  </div>

</div>