可以显示引导程序选项卡导航的

时间:2015-07-10 11:58:35

标签: twitter-bootstrap twitter-bootstrap-3

我正在使用bootstrap Tab导航,我想在bootstrap breadcrumb中反映这个导航。我怎样才能实现它。这是我的类似代码:

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

我想在我的页面中添加一个面包屑,显示当前活动点击的导航,例如“Home / some text”,如果“some text”选项卡是活动的那个。我需要一些帮助才能实现这一目标。

这是jsfiddle的链接:jsFiddle

2 个答案:

答案 0 :(得分:0)

这是非常基本的,但我猜这是你想要的想法

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/

答案 1 :(得分:0)

以下是我的回答,初始化现有java.lang.NullPointerException at android.widget.GridView.fillSelection(GridView.java:461) at android.widget.GridView.layoutChildren(GridView.java:1249) at android.widget.AbsListView.onLayout(AbsListView.java:2563) at android.view.View.layout(View.java:15762) at android.view.ViewGroup.layout(ViewGroup.java:4867) at android.widget.LinearLayout.setChildFrame(LinearLayout.java:1677) at android.widget.LinearLayout.layoutVertical(LinearLayout.java:1531) at android.widget.LinearLayout.onLayout(LinearLayout.java:1440) at android.view.View.layout(View.java:15762) at android.view.ViewGroup.layout(ViewGroup.java:4867) ....... 的{​​{1}}元素,并根据点击的.breadcrumb .set-text链接的文字更改其文字。

.nav-tabs .active
.nav-tabs