没有锚的Bootstrap标签？

我想知道是否可以在不使用锚元素的情况下编写Bootstrap选项卡<a>？没有锚的Bootstrap标签？

我想知道的原因是，我想补充的标签中的元素是不是<a>有效的儿童 - 在我的情况下，我想添加一个<input>（注意<input>不是用来控制的标签，如这样）。

原型标签例子可以是：

<div class="tabbable"> 
    <ul class="nav nav-tabs"> 
    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li> 
    <li><a href="#tab2" data-toggle="tab">Section 2</a></li> 
    </ul> 
    <div class="tab-content"> 
    <div class="tab-pane active" id="tab1"> 
     <p>I'm in Section 1.</p> 
    </div> 
    <div class="tab-pane" id="tab2"> 
     <p>I'm in Section 2.</p> 
    </div> 
    </div> 
</div>

我知道我可以标签显示编程使用make：

$('#tab1').tab('show')

但是，这似乎取决于一个事实，即它是一个<a>。例如，我可以使用<div>，并使用JQuery挂钩点击事件吗？

我需要某种方式来指定href如果我这样做。

来源

2016-09-27 Dan Gravell

你可以使用任何其他元素。而不是href属性，请使用data-target。

<div class="tabbable"> 
    <ul class="nav nav-tabs"> 
    <li class="active"><span data-target="#tab1" data-toggle="tab">Section 1</span ></li> 
    <li>    <span data-target="#tab2" data-toggle="tab">Section 2</span ></li> 
    </ul> 
    <div class="tab-content"> 
    <div class="tab-pane active" id="tab1"> 
     <p>I'm in Section 1.</p> 
    </div> 
    <div class="tab-pane" id="tab2"> 
     <p>I'm in Section 2.</p> 
    </div> 
    </div> 
</div>

不需要自定义JavaScript，但需要样式。示例在jsfiddle。

来源

2016-09-27 13:00:25 tmg

引导标签在'a'标签上有样式，所以你不会在这里找到样式，但是数据目标是正确的方法。 – Help

@帮助这就是为什么我提到需要自定义样式 – tmg

这工作，谢谢。 –

我认为你可以做这样的事情

<div> 

      <!-- Nav tabs --> 
      <ul class="nav nav-tabs" id="myTabs" role="tablist"> 
       <li role="presentation" class="active"> <a href="#home" aria-controls="home" role="tab" data-toggle="tab"> <input type="text" name="" id="input" class="form-control" value="" required="required" pattern="" title=""></a></li> 
       <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li> 
       <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li> 
       <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li> 
      </ul> 

      <!-- Tab panes --> 
      <div class="tab-content"> 
       <div role="tabpanel" class="tab-pane active" id="home">...</div> 
       <div role="tabpanel" class="tab-pane" id="profile">...</div> 
       <div role="tabpanel" class="tab-pane" id="messages">...</div> 
       <div role="tabpanel" class="tab-pane" id="settings">...</div> 
      </div> 

     </div> 


<div id="clickdiv" style="background-color: red;width: 20px;height: 20px"></div> 

<script type="text/javascript"> 
      $("#clickdiv").click(function(){ 
      // $('#myTabs a:first').tab('show') // Select first tab 
      // $('#myTabs a:last').tab('show') // Select last tab 
      $('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed) 
     }); 
    </script>

来源

2016-09-27 12:49:26 mahethekiller

麻烦的是那些仍然在使用锚包含的标签。 –

您可以使用data-target上输入..

<input data-target="#..." data-toggle="tab" class="form-control">

演示：http://www.codeply.com/go/mXUpU5b2x0

来源

2016-09-27 13:08:10 ZimSystem

当我添加一个输入时，输入不能控制标签......我会澄清这个问题。 –

没有锚的Bootstrap标签？

回答

相关问题