外部からブートストラップタブへのリンク

Question

私は問題があります。あなたが外部からタブにリンクするのを助けてくれることを願っています。

  <ul data-animate class="row list-unstyled action-list inline-type-2 bottom-space" role="tablist"> 
       <li role="presentation" class="col-lg-4 col-sm-6 bottom-space has-corner-line corner-anim active"> 
        <a class="tab secondary-headline has-icon corner-anim" href="#warenlogistik" aria-controls="warenlogistik" role="tab" data-toggle="tab"> 
         <i class="fi flaticon-shuffle"></i> 
         <h3 class="maintitle">Waren<strong>logistik</strong></h3> 
         <p class="subtitle">Roadtrip to reach your goals</p> 

         <span class="corner corner-1"></span> 
         <span class="corner corner-2"></span> 
        </a> 
       </li> 

私はカント一部 "リーチ"：アクティブ・パートNavigationbar

   <li class="has-children"><a href="#">Produktionsprozess</a> 
       <ul> 
          <li><a href="#warenlogistik">Warenlogistik</a></li> 
          <li><a href="#fotoproduktion">Fotoproduktion</a></li> 
          <li><a href="#abstimmung">Abstimmung & Freigabe</a></li> 
          <li><a href="#postproduction">Postproduktion</a></li> 

：それは毎回ただこれは私のコードである第一のリンク を取得します：

   <li role="presentation" class="col-lg-4 col-sm-6 bottom-space has-corner-line corner-anim"> 
        <a class="tab secondary-headline has-icon" href="#fotoproduktion" aria-controls="fotoproduktion" role="tab" data-toggle="tab"> 
         <i class="fi flaticon-technology"></i> 
         <h3 class="maintitle">Foto<strong>produktion</strong></h3> 
         <p class="subtitle">Photography at its best</p> 

         <span class="corner corner-1"></span> 
         <span class="corner corner-2"></span> 
        </a> 
       </li> 

グリッドコンテナやアコーディオンにもこのコードがあります。それは "warenlogistik" のための最初のものを作品ではなく、第二の "fotoproduktion"：

  <article class="row tab-pane in fade active" id="warenlogistik"> 
       <div class="col-sm-6"> 
        <figure> 
         <img src="images/pictures/produktionsprozess/warenlogistik.jpg" alt="Make a concept" /> 
        </figure> 
       </div>      

<div class="col-sm-6"> 
          <div class="secondary-headline"> 
           <h3 class="maintitle">Waren<strong>logistik</strong></h3> 
           <h4 class="subtitle">Feel the innovation</h4> 
          </div> <p> text text text </p></div></article> 


<article class="row tab-pane fade" id="fotoproduktion"> 
         <div class="col-sm-6"> 
          <figure> 
           <img src="images/pictures/produktionsprozess/fotoproduktion.jpg" alt="Make a concept" /> 
          </figure> 
         </div><div class="col-sm-6"> 
          <div class="secondary-headline"> 
           <h3 class="maintitle">Foto<strong>Produktion</strong></h3> 
           <h4 class="subtitle">text text</h4> 
          </div><p> text text text </p> 
        </div> 
       </article> 

script.js：

$('a[data-toggle="tab"]') .on('shown.bs.tab', function() { 
     $window.trigger ('resize'); 
    }); 

script.min.js： .....

私はbootstrap.min.jsで何かを持っているよりも

a('a[data-toggle="tab"]').on ("shown.bs.tab",function() 
{b.trigger("resize")}) , 
b.on("load",function() 
{a(".preloader"). 
fadeOut("slow"), 
a("body").addClass("loaded")} 

と

- 私は4時間以来、それを試して...申し訳ありませんが私はdidnのコードパネルを手に入れました。

誰かが助けてくれることを願っています。

よろしく マルクス

私はscript.jsですでにしようと試みたが、それは仕事をdoesntの：

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

}）;

編集： いいえ、私はデータトグル=「タブ」オープニングを手に入れましたが、まだその部分にジャンプできません。そのわずか

<li class="has-children"><a href="#">Produktionsprozess</a> 
        <ul> 
           <li><a href="#warenlogistik" data-toggle="tab">Warenlogistik</a></li> 
           <li><a href="#fotoproduktion" data-toggle="tab">Fotoproduktion</a></li> 
           <li><a href="#abstimmung" data-toggle="tab">Abstimmung & Freigabe</a></li> 
           <li><a href="#postproduction" data-toggle="tab">Postproduktion</a></li> 

を開いても、私はコメントを追加しました：

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

はImはこれを見てみてください話して何のアイデアを取得するには： https://www.bnecreative.com/blog/deeplink-bootstrap-tabs/

タップ開口部が動作しますが、ないthatsのもう問題はない。しかし、私は非アクティブなタブを開き、それにスクロールしたいと思います。これまでは、nav-barのリンクでタブを開き、内容をマニュアルにスクロールダウンする必要がありました。私はあなたの質問から伝えることができるものから、

Answer 1

あなたは<a>のリンクから個々のタブにアクセスできるようにしたいということです。もしそうなら..

代わりhrefと静的リンクを使用してのリンクを指示するためにjqueryのを使用する必要があるとしています。あなたは、タブを切り替えるには、ナビゲーションバーを使用したい

jQueryの

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

HTML

<a id="tab1" href="#postproduction">tab 1</a>