Question

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

我想知道的原因是我想在标签中添加<a>无效儿童的元素 - 在我的情况下我想要添加<input>（注意{{1}不用于控制选项卡，如此）。

原型标签示例可能是：

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

但这似乎取决于它是$('#tab1').tab('show')的事实。例如，我可以使用<a>并使用JQuery挂钩click事件吗？

如果我这样做，我需要一些方法来指定<div>。

Answer 1

您可以使用任何其他元素。请使用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中的示例。

Answer 2

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

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

Answer 3

您可以在输入中使用data-target ..

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

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

没有锚点的Bootstrap标签？

3 个答案: