可以显示bootstrap制表符导航的面包屑

问题描述：

我正在使用bootstrap制表导航，并且我想在引导面包屑中反映此导航。我怎样才能实现它。这是一个类似的代码，我有：可以显示bootstrap制表符导航的面包屑

<ul class="nav nav-tabs"> 
<li class="active"> 
    <a data-toggle="tab" href="#">some text</a> 
</li> 
<li> 
    <a data-toggle="tab" href="#">some text1</a> 
</li> 
</ul> 
<div class="tab-content"> 
<div role="tabpanel" class="tab-pane fade in active"> 
    <!--some content here--> 
</div> 
<div role="tabpanel" class="tab-pane"> 
    <!--some content here--> 
</div> 
</div>

我要添加到我的网页面包屑显示的导航例如“首页/一些文本”当前活动的水龙头，如果“一些文本”选项卡积极的一个。我需要一点帮助才能达到这个目标。

这是对的jsfiddle链接：jsFiddle

我们可以帮助你，但你能提供一个工作的jsfiddle和你的形象都想实现的？ – 5ervant

你必须使用jQuery来实现这一点。 –

答

这是非常基本的，但我想这是你想要

HTML

<ul class="nav nav-tabs"> 
<li class="active"> 
    <a class="tab-link" data-toggle="tab" href="#" data-url="#/someUrl1">some text</a> 
</li> 
<li> 
    <a class="tab-link" data-toggle="tab" href="#" data-url="#/someUrl2">some text1</a> 
</li> 
</ul> 
<ul class="breadcrumb pull-right"> 
<li> 
    <a href="#">Here</a> 
</li> 
<li> 
    <a href="#/someUrl1" class="active-breadcrumb">some text</a> 
</li> 
</ul> 
<div class="tab-content"> 
<div role="tabpanel" class="tab-pane fade in active"> 
    <!--some content here--> 
</div> 
<div role="tabpanel" class="tab-pane"> 
    <!--some content here--> 
</div> 
</div>

var activeBreadcrumb = $('.active-breadcrumb'); 

$('.nav').on('click', '.tab-link', function() { 
    var self = $(this); 
    activeBreadcrumb.attr('href', self.data('url')); 
    activeBreadcrumb.text(self.text()); 
});

这里的想法正在工作解决方案 http://jsfiddle.net/mateutek/57y0a8hr/2/

它看起来像你忘了**更新** JSFiddle，因为它说，_“我们真的很抱歉，但没有这样的页面。”_ – 5ervant

是啊，没有注意到 – Mateutek

答

这是我的答案，为现有的.nav-tabs .active初始化.breadcrumb .set-text元素，并根据点击的.nav-tabs链接的文本更改其文本。

var setText = $('.breadcrumb .set-text'); 
 

 
// Initialize .breadcrumb for the existing '.nav-tabs .active'. 
 
setText.addClass('active'); 
 
var initText = $('.nav-tabs .active').text(); 
 
setText.text(initText); 
 

 
$('.nav-tabs li a').on('click', function() { 
 
    setText.text($(this).text()); 
 
});

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

 

 
<ul class="nav nav-tabs"> 
 
<li class="active"> 
 
    <a data-toggle="tab" href="#">some text</a> 
 
</li> 
 
<li> 
 
    <a data-toggle="tab" href="#">some text1</a> 
 
</li> 
 
</ul> 
 
<ul class="breadcrumb pull-right"> 
 
<li> 
 
    <a href="#">Home</a> 
 
</li> 
 
<li class="set-text"> 
 
    <a href="#"></a> 
 
</li> 
 
</ul> 
 
<div class="tab-content"> 
 
<div role="tabpanel" class="tab-pane fade in active"> 
 
    <!--some content here--> 
 
</div> 
 
<div role="tabpanel" class="tab-pane"> 
 
    <!--some content here--> 
 
</div> 
 
</div> 
 

 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

可以显示bootstrap制表符导航的面包屑

相关推荐