可以顯示bootstrap製表符導航的麪包屑

Question

我正在使用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

Answer 1

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

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> 

JS

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/

Answer 2

這是我的答案，爲現有的.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>