Question

我正在使用 Bootstrap版本2.3.1 ，并且该选项卡无效。如果我升级到新版本，它可以解决。但是，如果我升级了我的bootstrap版本，所有以前的视图更改和导航栏也无法正常工作。所以我想留在2.3.1版本，我想在我的网站上创建标签。请提前帮助我。

 <link rel="stylesheet" href="http://localhost/assets/css/bootstrap.min.css"/>  
 <link rel="stylesheet" href="http://localhost/assets/css/bootstrap-responsive.min.css" />  

    /*!
  * Bootstrap v2.3.1
  *
  * Copyright 2012 Twitter, Inc
  * Licensed under the Apache License v2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  *
  * Designed and built with all the love in the world @twitter by @mdo and @fat.

Answer 1

这里的以下小提琴链接我使用bootstrap 2.3 v完成相同的标签检查Working fiddle Demo

建议：我在一个设计中遇到同样的问题，请使用以下链接转换您的bootstrap版本＆amp;它可以免费使用

Bootstrap version conversion tool

@import "//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css";

.tab:not(:target) {
  display: none;
}

.tab:last-child {
  display: block;
}

.tab:target ~ .tab:last-child {
  display: none;
}

.tabs {
  width: 30em;
  margin: 6.5em auto;
}

<div class="tabs">
  <div id="tab3" class="tab">
    <ul class="nav nav-tabs">
      <li><a href="#tab1">Description</a></li>
      <li><a href="#tab2">How it works</a></li>
      <li class="active"><a href="#tab3">Drawbacks</a></li>
    </ul>

    <ul>
      <li>Tab bar should be duplicated on each tab.</li>
      <li>Initially shown tab has to be the last.</li>
      <li>In IE &lt; 9 all tabs are shown.</li>
    </ul>
  </div>

  <div id="tab2" class="tab">
    <ul class="nav nav-tabs">
      <li><a href="#tab1">Description</a></li>
      <li class="active"><a href="#tab2">How it works</a></li>
      <li><a href="#tab3">Drawbacks</a></li>
    </ul>

    <ol>
      <li>Show only the last tab.</li>
      <li>If <code>:target</code> matches a tab, show it and hide all following siblings.</li>
    </ol>
  </div>

  <div id="tab1" class="tab">
    <ul class="nav nav-tabs">
      <li class="active"><a href="#tab1">Description</a></li>
      <li><a href="#tab2">How it works</a></li>
      <li><a href="#tab3">Drawbacks</a></li>
    </ul>

    <p>The idea is to use <code>:target</code> pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.</p>
  </div>
</div>

Bootstrap v2.3.1不适用于选项卡

1 个答案: