2017-07-20 154 views
0

我有一个问题,并希望你能帮助我链接到外部的标签。这将每次只得到第一个链接 这是我的代码:链接到外部的引导标签

的导航栏

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

活动部分:

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

我不能将部分 “达” :

   <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: .....

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")} 

,比我在bootstrap.min.js东西

I'll尝试由于图4小时... ...抱歉,我没没有得到代码面板。

希望有人能帮助!

问候 马库斯

我已经tryed中的script.js,但它不工作:

$('#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'); 
}) 

为了得到一个想法是什么林谈论,请在此我们来看一看: https://www.bnecreative.com/blog/deeplink-bootstrap-tabs/

出渣口将工作,那不是问题了。但我想打开非活动选项卡并向下滚动。到现在为止,我必须打开带有导航栏中链接的选项卡,然后向下滚动到内容手册。

+0

? –

+0

是的,我这样做 - 这将是伟大的 –

回答

0

从我可以告诉你的问题是,你想能够访问从<a>链接个别选项卡。如果是这样的话..

你将不得不使用jquery来指导链接,而不是使用静态链接与href

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> 
要使用导航键切换标签页
+0

谢谢,我试过这个,但它不能解决问题:(我编辑的代码可能是一些额外的细节(活动和非活动部分) –