从链接打开 Bootstrap 标签页

Question

Javascript / jQuery初学者。这个问题已经被问了很多次，但我不能实现任何解决方案并使它们在我的单页网站上工作。下面是我的代码。到目前为止，我尝试了以下的变化（没有成功）：

• 链接到同一页上的特定Twitter Bootstrap选项卡
• 从Bootstrap的nav-tabs跳转到特定标签页
• 有没有办法通过URL启用BootStrap标签？
• Twitter Bootstrap选项卡：在页面重新加载或超链接时跳转到特定选项卡
• 如何在Bootstrap 3中使用onclick显示具有外部链接的选项卡
• 如何从其他页面上的超链接链接Twitter Bootstrap选项卡
• 使用url链接到一个带选项卡的Bootstrap标签页
• 外部链接到一个选项卡，Bootstrap 3.3.5中的标签不会更改
• 单击链接并切换活动类以在不同页面上进入特定选项卡

下面是我得出的最接近解决方案。我错过了什么吗？

$(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>

- 32k_

---

什么问题？你能再解释一下吗？ - SaidbakR

非常感谢@SaidbakR，这个方法很有效。我有一个快速跟进的问题：如何修改jQuery代码，使得< li >元素的活动状态也会改变？换句话说，最好的切换< li >活动类的方法是什么？提前致以万分感谢。 - 32k_

我无法理解您需要什么？！ li 的活动类已经切换，即单击其选项卡时出现蓝色背景，单击其他选项卡时它会消失！ - SaidbakR

在发布问题之前，我应该先关闭我的内容和脚本拦截器 - 对于造成的困扰，我深感抱歉，并再次表示非常感谢！ - 32k_

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>

- Mosh Feu

Answer 2

使用$(document).ready()代替load。请查看这个演示。

- SaidbakR