引导选项卡无法正常工作

Question

我在使用引导选项卡时遇到问题。 在引导选项卡链接上，我将我的页面 ID 放在#link 之前，它的工作从 id 1 到 9，但在 id 10 之后，它的不工作错误页面未找到。 这是浏览器行为 如果我点击 ID 1 到 9 的链接是这样的

http://example.com/page/1

id 10 就这样升起来

http://example.com/page/(missing num)5

我的代码如下：

    <!-- Tabs -->
  <div role="tabpanel">

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#albums" aria-controls="albums" role="tab" data-toggle="tab">Albums <span class="badge"><span class="albums_count"></span></span></a></li>
    <li role="presentation"><a href="<%= id %>/#videos" aria-controls="videos" role="tab" data-toggle="tab">Videos <span class="badge"><span class="videos_count"></span></span></a></li>
    <li role="presentation"><a href="<%= id %>/#biography" aria-controls="biography" role="tab" data-toggle="tab">Biography</a></li>
    <li role="presentation"><a href="<%= id %>/#comments" aria-controls="comments" role="tab" data-toggle="tab">Comments</a></li>
  </ul>   
  <!-- Tab panes -->
      <div class="tab-content">
        <!-- Albums -->
        <div role="tabpanel" class="tab-pane active" id="albums">
          <div class="row">
            <div class="col-sm-12 artist-albums">
              <div class="albums">
                <h2 class="page-subtitle">Albums</h2>
              <div id="artist_albums"></div>
              </div>
            </div>
          </div>
        </div>
        <!-- Videos -->
        <div role="tabpanel" class="tab-pane" id="videos">
          <div class="row">
            <div class="col-sm-12">
              <div id="artist_videos"></div>
            </div>
          </div>
        </div>
        <!-- Bio -->
        <div role="tabpanel" class="tab-pane" id="biography">
          <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-12">
            <h2 class="page-subtitle">Biography</h2>
             <p class="basic-copy"><%= bio %></p>
            </div>
          </div>
        </div>
        <!-- Comments -->
        <div role="tabpanel" class="tab-pane" id="comments">
           <div class="row">
             <div class="col-xs-12 col-sm-6 col-md-12">
             <div class="fb-comments" data-href="<%= player_root %>artist/<%= id %>" data-width="100%" data-num-posts="10" og:image="'+player_root+'static/artists/<%= id %>_large.jpg" og:title="<%= name %>"></div>
             </div>
           </div>
        </div>

      </div>
    </div> 

Answer 1

我想你需要把它全部连接起来......这是我为解释该技术而打趣的一个示例。

$(function() {
  var tabs = $('div .tab');
  var lis = $('li');
  $(tabs.selector)
    .filter(':odd')
    .css('background-color', '#abcdef');
  var ATTR = 'data-tab';
  var showTab = function(v) {
    tabs.hide();
    tabs.filter(function() {
      return $(this).attr(ATTR) == v;
    }).show();
  };

  $('a').each(function() {
    var el = $(this);
    if (el.parent().hasClass('active')) {
      showTab(el.attr(ATTR));
      return false;
    }
  }).click(function() {
    var el = $(this);
    tabs.hide();
    showTab(el.attr(ATTR));
    console.log(lis);
    //we have to set the li element
    //class as active...
    var a = lis.removeClass('active');
    var b = lis.filter(function() {
      return this === el.parent().get(0);
    }).addClass('active');
    console.log(b);
  });
});

.tab {
  margin: 0px;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  height: 105px;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />

<h1>Bootstrap Tabs Sample</h1>

<div class="container-fluid">
  <ul class="nav nav-tabs">
    <li role="presentation" class="active"><a href="#" data-tab="home">Home</a>

    </li>
    <li role="presentation"><a href="#" data-tab="profile">Profile</a>

    </li>
    <li role="presentation"><a href="#" data-tab="messages">Messages</a>

    </li>
  </ul>
  <div data-tab="home" class="tab">
    <h2>Home</h2>

  </div>
  <div data-tab="profile" class="tab">
    <h2>Profile</h2>

  </div>
  <div data-tab="messages" class="tab">
    <h2>Messages</h2>

  </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

Answer 2

我遇到了同样的问题，我通过覆盖 tab-nav 点击监听器修复了它。 如果您使用 javascript，您可以将 onclick 侦听器添加到标记 或使用 jquery $('a').click 监听器覆盖它。 函数内部如下：

function fbInit(){
    //show tab content
    $('#myTab Reviews').tab('show');
    
    //init fb comment box
    (function(d, s, id) {
	var js, fjs = d.getElementsByTagName(s)[0];
	if (d.getElementById(id)) return;
	js = d.createElement(s); js.id = id;
	js.src = "//connect.facebook.net/zh_TW/sdk.js#xfbml=1&appId=****APPID****&version=v2.0";
	    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
    
    //resize span to 100% which fluid read as 0 because tab content is 0 before you click to show it
    $('.fb_iframe_widget_fluid>span').attr('width','100%');
}