如何将Bootstrap标签页的Web下拉菜单改为水平标签菜单

• 不需要引入任何额外依赖库，基于你现有引入的jQuery、Bootstrap3资源，少量修改代码即可实现目标效果。
• Bootstrap3原生标签页组件内置的下拉联动样式确实仅提供默认垂直下拉菜单效果，没有内置水平展开的二级标签样式，但完全可以基于原生组件的API和类名扩展实现，不需要替换组件。

1. 修复原代码语法错误：原代码中导航栏</ul>闭合标签后多写了一个多余的</li>，直接删除即可。
2. 替换原有Web下拉项结构：移除默认的dropdown、dropdown-toggle、dropdown-menu类关联的垂直下拉逻辑，改成自定义的二级水平标签容器结构。
3. 新增少量自定义CSS：将二级标签容器设置为水平排列，样式和顶级标签保持视觉统一，默认隐藏，点击Web项时触发展开。
4. 补充极简jQuery逻辑：处理标签切换的激活状态，点击二级标签时保持Web顶级项的选中状态，点击其他顶级标签时自动收起二级标签栏。

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
  <style>
    /* 二级水平标签基础样式 与Bootstrap原生tab风格统一 */
    .web-sub-tabs {
      display: none;
      list-style: none;
      padding: 0;
      margin: 0;
      float: left;
    }
    .web-sub-tabs li {
      float: left;
    }
    .web-sub-tabs li a {
      display: block;
      padding: 10px 15px;
      margin-right: 2px;
      line-height: 1.42857143;
      border: 1px solid transparent;
      border-radius: 4px 4px 0 0;
      position: relative;
      color: #337ab7;
    }
    .web-sub-tabs li.active a {
      color: #555;
      cursor: default;
      background-color: #fff;
      border: 1px solid #ddd;
      border-bottom-color: transparent;
    }
    .web-sub-tabs li a:hover {
      text-decoration: none;
      background-color: #eee;
    }
    /* 二级标签展开状态 */
    .web-tab-wrap.active .web-sub-tabs {
      display: block;
    }
  </style>
</head>

<body>
  <div class="container">
    <h3>A demo of Bootstrap Tabs</h3>

    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
      <li class="active"><a href="#hometab" role="tab" data-toggle="tab">Home</a></li>
      <li><a href="#javatab" role="tab" data-toggle="tab">Java</a></li>
      <li><a href="#csharptab" role="tab" data-toggle="tab">C#</a></li>
      <li><a href="#mysqltab" role="tab" data-toggle="tab">MySQL</a></li>

      <li class="web-tab-wrap">
        <a href="javascript:;" class="web-main-tab">Web <b class="caret"></b></a>
        <ul class="web-sub-tabs">
          <li><a href="#jquerytab" role="tab" data-toggle="tab">jQuery</a></li>
          <li><a href="#bootstab" role="tab" data-toggle="tab">Bootstrap</a></li>
          <li><a href="#htmltab" role="tab" data-toggle="tab">HTML</a></li>
        </ul>
      </li>
    </ul>

    <!-- Tab panes 原有内容完全不需要修改 -->
    <div class="tab-content">
      <div class="tab-pane active" id="hometab">Write something for home tab</div>
      <div class="tab-pane" id="javatab">The Java is an object-oriented programming language that was developed by James Gosling from the Sun Microsystems in 1995.
      </div>
      
      <div class="tab-pane" id="csharptab">C# is also a programming language</div>
      <div class="tab-pane" id="mysqltab">MySQL is a databased mostly used for web applications.</div>

      <div class="tab-pane" id="jquerytab">jQuery content here </div>
      
      <div class="tab-pane" id="bootstab">Bootstrap Content here
        <ul>
          <li>Bootstrap forms</li>
          <li>Bootstrap buttons</li>
          <li>Bootstrap navbar</li>
          <li>Bootstrap footer</li>
        </ul>
      </div>
      <div class="tab-pane" id="htmltab">Hypertext Markup Language</div>
    </div>
  </div>

  <script>
    $(function(){
      // 点击Web主选项 展开二级标签并默认选中第一个子项
      $('.web-main-tab').on('click', function(e){
        e.preventDefault();
        $(this).parent().addClass('active').siblings().removeClass('active');
        $('.web-sub-tabs li').removeClass('active');
        $('.web-sub-tabs li:first-child').addClass('active').find('a').tab('show');
      })

      // 点击二级标签时 保持Web主项激活状态
      $('.web-sub-tabs a').on('click', function(){
        $(this).parent().addClass('active').siblings().removeClass('active');
        $(this).closest('.web-tab-wrap').addClass('active').siblings().removeClass('active');
      })

      // 点击其他顶级标签时 自动收起Web二级标签栏
      $('.nav-tabs li:not(.web-tab-wrap) a').on('click', function(){
        $(this).parent().addClass('active').siblings().removeClass('active');
      })
    })
  </script>
</body>

实现后点击Web选项，会在Web标签右侧水平展开三个子标签，切换逻辑和原生标签页完全一致，点击其他顶级标签时二级标签栏自动收起，样式和原生Bootstrap标签风格完全统一。

内容的提问来源于stack exchange，提问作者Codec737