javascript - Bootstrap 4 嵌套选项卡未删除事件选项卡

Question

我有一些嵌套的选项卡，垂直和水平，但它们不会切换事件状态，否则会出现错误

body
{
  min-height: 100%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

<div class="container-fluid row c2" id="my_jiku_box">
<div class="col-12 row" id="args">
  <div class="col-4 nav flex-column nav-pills c1" id="vertMenu" role="tablist">
    <a class="nav-link active" href="#v-pills-0" data-toggle="pill" role="tab"
    aria-controls="#v-pills-0" aria-expanded="true">1980 Markina attack<span class=
    "spaceTimeInfo">Spain, 20 September 1980</span></a><a class="nav-link" href=
    "#v-pills-1" data-toggle="pill" role="tab" aria-controls="#v-pills-1"
    aria-expanded="false">Cafeter&iacute;a Rolando bombing<span class=
    "spaceTimeInfo">Spain, 13 September 1974</span></a>
  </div>

  <div class="col-8" id="horMenu">
    <div class="tab-content" id="v-pills-tabContent">
      <div class="tab-pane fade active show" aria-labelledby="v-pills-0" id=
      "v-pills-0">
        <ul class="nav nav-pills nav-justified" role="tablist" id="pills-tab0">
          <li class="nav-item"><a class="nav-link active" href="#pills-0"
          data-toggle="pill" role="tab" aria-controls="pills-0" aria-expanded=
          "true">Text</a></li>

          <li class="nav-item"><a class="nav-link" href="#pills-images0" data-toggle=
          "pill" role="tab" aria-controls="pills-0" aria-expanded=
          "true">Images</a></li>

          <li class="nav-item"><a class="nav-link" href="#pills-videos0" data-toggle=
          "pill" role="tab" aria-controls="pills-0">Videos</a></li>
        </ul>

        <div class="tab-content">
          <div class="tab-pane fade active show" id="pills-0">
            <div class="toolbar">
              <a data-command="bold" href="#"></a><a data-command="italic" href=
              "#"></a><a data-command="underline" href="#"></a><a data-command=
              "strikeThrough" href="#"></a>
            </div>

            <div class="dropEL col">
              <div class="drag-header">
                Drag and resize me!
              </div>

              <p class="content_jiku" contenteditable="true">The 1980 Markina attack
              was a gun attack by the Basque separatist organisation ETA which
              occurred on 20 September 1980 near the Basque town of Markina (Spanish:
              ). The targets were a group of off-duty civil guards who were having
              lunch in a bar in the town. Four civil guards were killed. The attack
              was one of the deadliest of 1980, the year when ETA killed more people
              than any other.</p>
            </div>
          </div>

          <div class="tab-pane fade dropEL col" id="pills-images0">
          <div class="drag-header"></div><img class="img-fluid" src=
          "https://lh6.googleusercontent.com/proxy/z9R-exzTZRIbnzTVezVAK9u4GLKmJxavscBKYnJnZqb25oDK2aF0pbC3K1BppdKBabOaxUMTB6L8_A1bTxp_0V_zqwmV2z4_MBJH0_67azUnVp02JeQThcFNVfOj8K_hN4OYKAdXPjGWjgfE8jY=-rj-w300-h300-l95-c0x039be5" /></div>

          <div class="tab-pane fade dropEL col" id="pills-videos0">
            <div class="drag-header"></div>

            <div class="embed-responsive embed-responsive-16by9">
              <iframe class="embed-responsive-item" src=
              "https://www.youtube.com/embed/vQMSwhfnwZI?rel=0&amp;modestbranding=1"></iframe>
            </div>
          </div>
        </div>
      </div>

      <div class="tab-pane fade" aria-labelledby="v-pills-1" id="v-pills-1">
        <ul class="nav nav-pills nav-justified" role="tablist" id="pills-tab1">
          <li class="nav-item"><a class="nav-link" href="#pills-1" data-toggle="pill"
          role="tab" aria-controls="pills-1" aria-expanded="false">Text</a></li>

          <li class="nav-item"><a class="nav-link" href="#pills-images1" data-toggle=
          "pill" role="tab" aria-controls="pills-1" aria-expanded=
          "false">Images</a></li>

          <li class="nav-item"><a class="nav-link" href="#pills-videos1" data-toggle=
          "pill" role="tab" aria-controls="pills-1">Videos</a></li>
        </ul>

        <div class="tab-content">
          <div class="tab-pane fade" id="pills-1">
            <div class="toolbar">
              <a data-command="bold" href="#"></a><a data-command="italic" href=
              "#"></a><a data-command="underline" href="#"></a><a data-command=
              "strikeThrough" href="#"></a>
            </div>

            <div class="dropEL col">
              <div class="drag-header">
                Drag and resize me!
              </div>

              <p class="content_jiku" contenteditable="true">The Cafeter&iacute;a
              Rolando bombing was an attack on 13 September 1974 at the Rolando cafe
              in Calle del Correo, Madrid, Spain which killed 13 people and wounded
              71. Though no claim of responsibility was made, the attack is widely
              believed to have been carried out by the armed Basque separatist group
              ETA.</p>
            </div>
          </div>

          <div class="tab-pane fade dropEL col" id="pills-images1">
          <div class="drag-header"></div><img class="img-fluid" src=
          "https://i2.wp.com/upload.wikimedia.org/wikipedia/commons/thumb/6/67/Real_Casa_de_Correos_%28Madrid%29_05b.jpg/1280px-Real_Casa_de_Correos_%28Madrid%29_05b.jpg" /></div>

          <div class="tab-pane fade dropEL col" id="pills-videos1">
            <div class="drag-header"></div>

            <div class="embed-responsive embed-responsive-16by9">
              <iframe class="embed-responsive-item" src=
              "https://www.youtube.com/embed/VVOCg3kInUk?rel=0&amp;modestbranding=1"></iframe>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="col-6 row col"></div>

jsFiddle在这里，我基本上试图混合 bootstrap vertical tab切换水平制表符系统的菜单

Answer 1

向左侧的选项卡添加一个虚拟类 mainTab，以区分垂直选项卡和水平选项卡。在声明面板变量后，将此代码添加到您的单击函数中。我已将适用于我的代码粘贴到外部 html 文件中，如果我使视口(viewport)尺寸变大，也会粘贴 fiddle 。唯一的问题是存在一些与此问题无关的控制台错误。 “无法构造‘PresentationRequest’:文档已被沙盒化并且缺少‘allow-presentation’标志”。

您可能需要设置的另一件事是加载时默认激活的水平标签。

由于外部 div 上的 nav-pills 类，您的嵌套选项卡未删除事件颜色。

 <div class="container-fluid row c2" id="my_jiku_box">
    <div class="col-6 row" id="args">
      <div class="col-4 nav flex-column nav-pills c1" id="vertMenu" role="tablist">
        <a class="nav-link active mainTab" href="#v-pills-0" data-toggle="pill" role="tab"
        aria-controls="#v-pills-0" aria-expanded="true">1980 Markina attack<span class=
        "spaceTimeInfo">Spain, 20 September 1980</span></a><a class="nav-link mainTab" href=
        "#v-pills-1" data-toggle="pill" role="tab" aria-controls="#v-pills-1"
        aria-expanded="false">Cafeter&iacute;a Rolando bombing<span class=
        "spaceTimeInfo">Spain, 13 September 1974</span></a>
      </div>

      <div class="col-8" id="horMenu">
        <div class="tab-content" id="v-pills-tabContent">
          <div class="tab-pane fade active show hMain" aria-labelledby="v-pills-0" id=
          "v-pills-0">
            <ul class="nav nav-justified" role="tablist" id="pills-tab0">
              <li class="nav-item"><a class="nav-link active" href="#pills-0"
              data-toggle="pill" role="tab" aria-controls="pills-0" aria-expanded=
              "true">Text</a></li>

              <li class="nav-item"><a class="nav-link" href="#pills-images0" data-toggle=
              "pill" role="tab" aria-controls="pills-0" aria-expanded=
              "true">Images</a></li>

              <li class="nav-item"><a class="nav-link" href="#pills-videos0" data-toggle=
              "pill" role="tab" aria-controls="pills-0">Videos</a></li>
            </ul>

            <div class="tab-content">
              <div class="tab-pane fade active show" id="pills-0">
                <div class="toolbar">
                  <a data-command="bold" href="#"></a><a data-command="italic" href=
                  "#"></a><a data-command="underline" href="#"></a><a data-command=
                  "strikeThrough" href="#"></a>
                </div>

                <div class="dropEL col">
                  <div class="drag-header">
                    Drag and resize me!
                  </div>

                  <p class="content_jiku" contenteditable="true">The 1980 Markina attack
                  was a gun attack by the Basque separatist organisation ETA which
                  occurred on 20 September 1980 near the Basque town of Markina (Spanish:
                  ). The targets were a group of off-duty civil guards who were having
                  lunch in a bar in the town. Four civil guards were killed. The attack
                  was one of the deadliest of 1980, the year when ETA killed more people
                  than any other.</p>
                </div>
              </div>

              <div class="tab-pane fade dropEL col" id="pills-images0">
              <div class="drag-header"></div><img class="img-fluid" src=
              "https://lh6.googleusercontent.com/proxy/z9R-exzTZRIbnzTVezVAK9u4GLKmJxavscBKYnJnZqb25oDK2aF0pbC3K1BppdKBabOaxUMTB6L8_A1bTxp_0V_zqwmV2z4_MBJH0_67azUnVp02JeQThcFNVfOj8K_hN4OYKAdXPjGWjgfE8jY=-rj-w300-h300-l95-c0x039be5" /></div>

              <div class="tab-pane fade dropEL col" id="pills-videos0">
                <div class="drag-header"></div>

                <div class="embed-responsive embed-responsive-16by9">
                  <iframe class="embed-responsive-item" src=
                  "https://www.youtube.com/embed/vQMSwhfnwZI?rel=0&amp;modestbranding=1"></iframe>
                </div>
              </div>
            </div>
          </div>

          <div class="tab-pane fade hMain" aria-labelledby="v-pills-1" id="v-pills-1">
            <ul class="nav nav-justified" role="tablist" id="pills-tab1">
              <li class="nav-item"><a class="nav-link" href="#pills-1" data-toggle="pill"
              role="tab" aria-controls="pills-1" aria-expanded="false">Text</a></li>

              <li class="nav-item"><a class="nav-link" href="#pills-images1" data-toggle=
              "pill" role="tab" aria-controls="pills-1" aria-expanded=
              "false">Images</a></li>

              <li class="nav-item"><a class="nav-link" href="#pills-videos1" data-toggle=
              "pill" role="tab" aria-controls="pills-1">Videos</a></li>
            </ul>

            <div class="tab-content">
              <div class="tab-pane fade" id="pills-1">
                <div class="toolbar">
                  <a data-command="bold" href="#"></a><a data-command="italic" href=
                  "#"></a><a data-command="underline" href="#"></a><a data-command=
                  "strikeThrough" href="#"></a>
                </div>

                <div class="dropEL col">
                  <div class="drag-header">
                    Drag and resize me!
                  </div>

                  <p class="content_jiku" contenteditable="true">The Cafeter&iacute;a
                  Rolando bombing was an attack on 13 September 1974 at the Rolando cafe
                  in Calle del Correo, Madrid, Spain which killed 13 people and wounded
                  71. Though no claim of responsibility was made, the attack is widely
                  believed to have been carried out by the armed Basque separatist group
                  ETA.</p>
                </div>
              </div>

              <div class="tab-pane fade dropEL col" id="pills-images1">
              <div class="drag-header"></div><img class="img-fluid" src=
              "https://i2.wp.com/upload.wikimedia.org/wikipedia/commons/thumb/6/67/Real_Casa_de_Correos_%28Madrid%29_05b.jpg/1280px-Real_Casa_de_Correos_%28Madrid%29_05b.jpg" /></div>

              <div class="tab-pane fade dropEL col" id="pills-videos1">
                <div class="drag-header"></div>

                <div class="embed-responsive embed-responsive-16by9">
                  <iframe class="embed-responsive-item" src=
                  "https://www.youtube.com/embed/VVOCg3kInUk?rel=0&amp;modestbranding=1"></iframe>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
        <div class="col-6 row col"></div>
   <script type="text/javascript">
   $(document).ready(function(){
  $(".nav-link").removeClass("active");
  var elem = $(".mainTab")[0];

  $(elem).addClass("active");
  var href=$(elem).attr("href")
  console.log(href);
  $("div"+href).show();
  console.log($("div"+href).find(".nav-link")[0]);
  $($("div"+href).find(".nav-link")[0]).addClass("nav-pills");
});
           $(".nav-link").click(function(){
          var me = $(this);
          var panel = $('#' + this.hash.substr(1).toLowerCase());

          if(me.hasClass("mainTab"))
          {
            $(".nav-link.active").removeClass("active");

            var href=me.attr("href");
            $("div.hMain").hide();   
            $("div.hMain").removeClass("active");
            $("div"+href).show();
          }
          me.parent().addClass('nav-pills');
          if(me.hasClass('active')){
             $(".nav-link.active").removeClass("active");
             me.removeClass('active');

             panel.removeClass('active');     
                return false;
          }
        });
   </script>