标签: bootstrap-tabs

我正在使用引导程序 3.3 并遵循选项卡的文档。

文档中给出的最简单的代码对我不起作用，我无法弄清楚原因。

$('#mainTabs a').click(function (e) {
            e.preventDefault()
            console.log('Clicked');
        });

当我使用

show.bs.tab

事件， preventDefault 有效。但由于某种原因点击没有。控制台正在打印“clicked”，但不会阻止选项卡更改。

基本上我试图拦截选项卡更改，显示模式并基于用户输入，显示或不显示新选项卡。

请帮忙。

我有一个选项卡列表,其中包含可以禁用的元素 - 即不可点击.当'禁用'作为类添加时,鼠标悬停在元素上表示该选项卡不可点击.不幸的是,该元素是可点击的.我试图datatoggle="tab"在元素被禁用时从元素中删除,但我的jQuery技能是不够的.

我有一个ul class="nav nav-tabs" with id="myTabs" 和我正在尝试使用此jQuery语句删除data-toggle属性:

$('#myTabs a').is('.disabled').removeAttr('data-toggle');

Bootply示例

我有这些代码 - 只是在每个选项卡式面板中带有单独图形的选项卡式面板.当我切换标签时,内容未正确加载.当我点击另一个标签时,面板的活动状态没有改变,你能帮助一个brotha弄明白吗？

<div class="col-sm-6">
    <!-- Tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li class="active"><a href="#DailyIncome" role="tab" data-toggle="tab">Daily Income</a></li>
        <li><a href="#YearlyIncome" role="tab" data-toggle="tab">Yearly Income</a></li>
        <li><a href="#Clients" role="tab" data-toggle="tab">Clients</a></li>
        <li><a href="#Orders" role="tab" data-toggle="tab">Orders</a></li>
    </ul>
    <!-- Content -->
    <div class="tab-content">
        <div class="tab-pane fade in active" id="DailyIncome">
            <div id="DailyIncomeChart" class="DailyIncomePanel"></div>
        </div>
        <div class="tab-pane fade" id="YearlyIncome">
            <div id="YearlyIncomeChart" class="YearlyIncomePanel"></div>
        </div>
        <div class="tab-pane fade" id="Clients"></div>
        <div class="tab-pane fade" id="Orders"></div>
    </div>
</div>

没有模态和ajax它工作正常.但是当我使用ajax在模态中加载选项卡式面板时,它不会选择Tab Panes.

<!-- Nav tabs -->
<ul class="nav nav-tabs tabs-left">
    <li class="active tab-selection"><a data-toggle="tab" href="#financial">Financial</a></li>
    <li class="tab-selection"><a data-toggle="tab" href="#marketing">Marketing</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="financial">Financial Tab</div>
  <div class="tab-pane" id="marketing">Marketing Tab</div>      
</div>

AJAX

$.ajax({
        url : url,
        type : "POST", 
        success:function(data){
            $(".modal-body").html(data);
        }
  });

我的模态

<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="previewForm" class="modal fade">
  <div class="modal-dialog" style="width: 675px">
    <div class="modal-content">
    <div class="modal-header">
        <button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h3 id="myModalLabel" class="modal-title">Preview</h3>
    </div>
        <div class="modal-body"> …

我在ASP.NET MVC项目中使用引导选项卡.在此选项卡中,我需要提供外部链接,因此当用户单击特定选项卡时,它将重定向到特定链接.

基本上我有四个控制器.现在,当用户单击选项卡时,我需要重定向到每个控制器.

下面是我尝试使用的代码,但它不起作用:

<ul class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
    <li><a href="http://google.com" role="tab" data-toggle="tab">Profile</a></li>
    <li><a href="http://test1.com" role="tab" data-toggle="tab">Messages</a></li>
    <li><a href="http://test2.com" role="tab" data-toggle="tab">Settings</a></li>
</ul>

更新:

如果我们删除data-toggle ="tab",那么它将松开标签功能.我的意思是当我点击标签时,它会加载页面并重定向.所以我的问题是,我们可以重定向到其他控制器而不加载我们现在正在做的页面并使其像tab一样工作吗？

我使用X-tabs插件使用bootstrap 3选项卡和样式:

HTML:

<div class='tabs-x tabs-below'>
    <div id="myTabContent-2" class="tab-content">
        <div class="tab-pane fade in active" id="home-2">
            <div class="col-xs-4 col-md-2">
                <p>The FALSE Tabs</p>
            </div>
        </div>
        <div class="tab-pane fade" id="profile-2">
            <p>The True TaBs WORKED</p>
        </div>
    </div>
    <ul id="myTab-2" class="nav nav-tabs" role="tablist">
        <li class="active"><a href="#home-2" role="tab" data-toggle="tab">Home</a>

        </li>
        <li><a href="#profile-2" role="tab-kv" data-toggle="tab">Profile</a>

        </li>
    </ul>
</div>

我添加标签内容新的div像这样:

<div class="col-xs-4 col-md-2"></div>

在行动中,这div显示在标签内容中,而不是工作.我怎么能解决这个问题？!

DEMO FIDDLE(检查第一个选项卡并查看问题,第二个选项卡工作正常)

我正在尝试实现两个基本选项卡和面板。页面加载时面板不显示内容（第 1 页）。但是，单击其他选项卡可以很好地处理正确的内容（第 2 页），然后返回到第一个选项卡也可以正常工作（第 1 页）。

<ul class="nav nav-tabs">
    <li class="active"><a href="#panel1" data-toggle="tab">Page 1</a></li>
    <li><a href="#panel2" data-toggle="tab">Page 2</a></li>
</ul>

<div class="tab-content">
    <div id="panel1" class="tab-pane">
        Page 1
    </div>
    <div id="panel2" class="tab-pane">
        Page 2
    </div>
</div>

我有什么遗漏的吗？

如何在UI-Bootsrap的Tab Nav上替换或添加新类.我期待的是,

<ul class="MY-CUSTOM-CLASS" ng-class="{'nav-stacked': vertical, 'nav-justified': justified}" ng-transclude="">
       <li ng-class="{active: active, disabled: disabled}" heading="Justified" class="ng-isolate-scope">
            <a href="" ng-click="select()" tab-heading-transclude="" class="ng-binding">Justified</a>
       </li>

       .....          
</ul> 

我尝试了以下但是,它正在将类添加到父级,

<tabset justified="true" class="tab-nav">
       <tab heading="Justified">Justified content</tab>
       <tab heading="SJ">Short Labeled Justified content</tab>
       <tab heading="Long Justified">Long Labeled Justified content</tab>
</tabset>

我有一个带有多个选项卡的div，当您单击每个选项卡时，它们会显示嵌套的div。我需要知道如何在页面加载时自动显示第二个选项卡：

  <div style="border: solid 1px #ddd; padding: 6px 6px; min-height: 300px;">
                <ul id="tabs" class="nav nav-tabs">
                    <li><a href="#general" data-toggle="tab">General Info</a></li>
                    <li><a href="#narrative" data-toggle="tab">Narrative</a></li>
                     <li><a href="#audit" data-toggle="tab">Audit</a></li>
               </ul>
                <div id="my-tab-content" class="tab-content paddingbottom20">
                    <div id="general" class="tab-pane">

                  </div>
                     <div id="narrative" class="tab-pane">

                    </div>
                    <div id="audit" class="tab-pane">

                    </div>
               </div>
            </div>

我希望能够使用引导选项卡但不使用唯一选择器.

我无法保证选择器是dom中唯一的选择器.

我有很多子模板,它们在渲染时包含在页面中,或者可以通过ajax加载到模态中.

我确实使用id,但从不在我可能在模态中使用的模板中,一些模态在页面加载事件之后被预加载.

  <div class="panel">
    <div class="panel-heading">
       <ul class="nav nav-tabs">
        <li><a data-target=".pane1" data-toggle="tab" aria-expanded="true">pane 1</a></li>
        <li><a data-target=".pane2" data-toggle="tab" aria-expanded="true">pane 2</a></li>
      </ul>     
    </div>
    <div class="panel-body">
      <div class="tab-content">
        <div class="tab-pane pane1">pane 1</div>
        <div class="tab-pane pane2">pane 2</div>
      </div>
    </div>
  </div>

我已经尝试了一个onclick关于锚标签的事件,只有jquery,这不是理想的,但无法让它与它一起工作.tab('show')

onclick="$(this).closest('.panel')
   .find('.tab-pane').hide();$(this).closest('.panel').find('.pane1').show();"

我想在按钮单击时一一显示下一个引导选项卡。现在在按钮单击时仅显示第二个选项卡，因为我已经对其进行了硬编码，应该用什么来代替 href="#second" 如何获取特定的 id在 href 中？当我第一次单击其他选项卡而不是单击第一个处于活动状态的选项卡时，用户必须收到错误消息“用户必须单击第一个选项卡，然后单击其他选项卡”，使用 noty 插件意味着禁用页面加载时除第一个选项卡外的其他选项卡。

这是我的代码

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script>
  $(function(){

        $('#changetabbutton').click(function(e){
            e.preventDefault();

            $('#mytabs a[href="#second"]').tab('show');
        });

    });
  </script>
</head>
<body>

<div class="container">

    <!-- Nav tabs -->
    <ul id="mytabs" class="nav nav-tabs" role="tablist">
      <li class="active">
          <a href="#first" role="tab" data-toggle="tab">
              <i class="fa fa-home"></i> First tab
          </a>
      </li>
      <li><a href="#second" role="tab" data-toggle="tab">
          <i class="fa fa-user"></i> Second tab
          </a>
      </li>
      <li>
          <a href="#third" role="tab" data-toggle="tab"> …