javascript - 在 bootstrap-tabdrop 中重新排序选项卡

Question

我有一个带有 navbar 的页面，我正在使用 bootstrap-tabdrop 插件，当有太多内容无法显示时，它会将选项卡放入下拉列表中线。目标是:

• 在浏览实际显示的选项卡时:无。
• 单击下拉列表中的选项卡时，此选项卡将位于导航栏的第一个位置。

我有以下代码。

JS:

$('#demo-tabs').tabdrop({position: 'left'});

function setActivePane(el) {
    console.log(el);
    var flag=0;
    var list = $("#demo-tabs > li").get();

    list.forEach(function(li) {
        if(li.id == el.id) {flag = 1;}    
    });

    if(flag == 0) {
        $("#"+el.id).insertBefore(document.getElementById(list[0].id));
    }
}

HTML:

<div style="max-width: 400px;" id="all">
    <ul id="demo-tabs" class="nav nav-tabs nav-separated tabdrop" >
        <li id="nav0" class="active" onclick="setActivePane(this)">
            <a href="#tab1" role="tab" data-toggle="tab" >Tab 1</a>
        </li>
        <li id="nav1" onclick="setActivePane(this)"><a href="#tab2" role="tab" data-toggle="tab">Tab 2</a></li>
        <li id="nav2" onclick="setActivePane(this)"><a href="#tab3" role="tab" data-toggle="tab">Tab 3</a></li>
        <li id="nav3" onclick="setActivePane(this)"><a href="#tab4" role="tab" data-toggle="tab">Tab 4</a></li>
        <li id="nav4" onclick="setActivePane(this)"><a href="#tab5" role="tab" data-toggle="tab">Tab 5</a></li>
        <li id="nav5" onclick="setActivePane(this)"><a href="#tab6" role="tab" data-toggle="tab">Tab 6</a></li>
        <li id="nav6" onclick="setActivePane(this)"><a href="#tab7" role="tab" data-toggle="tab">Tab 7</a></li>
        <li id="nav7" onclick="setActivePane(this)"><a href="#tab8" role="tab" data-toggle="tab">Tab 8</a></li>
    </ul>
</div>

<!-- Tab panes -->
<div class="tab-content gimmie-a-little-padding">
    <div class="tab-pane active" id="tab1">This is tab 1</div>
    <div class="tab-pane" id="tab2">This is tab 2</div>
    <div class="tab-pane" id="tab3">This is tab 3</div>
    <div class="tab-pane" id="tab4">This is tab 4</div>
    <div class="tab-pane" id="tab5">This is tab 5</div>
    <div class="tab-pane" id="tab6">This is tab 6</div>
    <div class="tab-pane" id="tab7">This is tab 7</div>
    <div class="tab-pane" id="tab8">This is tab 8</div>
</div>

它几乎可以正常工作，我的选项卡位于第一个位置，但是如果我想在下拉列表之外保留相同数量的选项卡，我需要调整页面大小。

这是一个JSFiddle

有什么想法吗？

Answer 1

我希望你想说的是，当你从下拉列表中选择一个选项卡时，它可以工作，但它会附加到现有选项卡上，这会扰乱你的设计，所以我所做的是添加了 li进入下拉列表

$('#demo-tabs').tabdrop({
  position: 'left'
});


function setActivePane(el) {
  var flag = 0;
  var list = $("#demo-tabs > li").get();
  list.forEach(function(li) {
    if (li.id == el.id) {
      flag = 1;
    }
  });
  if (flag == 0) {
    var toberemoved = document.getElementById(list[0].id);
    $("#" + el.id).insertBefore(toberemoved);
    $('.dropdown-menu').append(toberemoved);
    $(toberemoved).removeClass();
  }
}

function move() {
  reload("all");
}

function reload(id) {
  var container = document.getElementById(id);
  var content = container.innerHTML;
  container.innerHTML = content;
  console.log("test");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/leafn0de/bootstrap-tabdrop/master/build/bootstrap-tabdrop.js"></script>
<link rel="stylesheet" href="https://rawgit.com/leafn0de/bootstrap-tabdrop/master/build/bootstrap-tabdrop.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div style="max-width: 400px;" id="all">
  <ul id="demo-tabs" class="nav nav-tabs nav-separated tabdrop">
    <li id="nav0" class="active" onclick="setActivePane(this)"><a href="#tab1" role="tab" data-toggle="tab">Tab 1</a></li>
    <li id="nav1" onclick="setActivePane(this)"><a href="#tab2" role="tab" data-toggle="tab">Tab 2</a></li>
    <li id="nav2" onclick="setActivePane(this)"><a href="#tab3" role="tab" data-toggle="tab">Tab 3</a></li>
    <li id="nav3" onclick="setActivePane(this)"><a href="#tab4" role="tab" data-toggle="tab">Tab 4</a></li>
    <li id="nav4" onclick="setActivePane(this)"><a href="#tab5" role="tab" data-toggle="tab">Tab 5</a></li>
    <li id="nav5" onclick="setActivePane(this)"><a href="#tab6" role="tab" data-toggle="tab">Tab 6</a></li>
    <li id="nav6" onclick="setActivePane(this)"><a href="#tab7" role="tab" data-toggle="tab">Tab 7</a></li>
    <li id="nav7" onclick="setActivePane(this)"><a href="#tab8" role="tab" data-toggle="tab">Tab 8</a></li>
  </ul>
</div>

<!-- Tab panes -->
<div class="tab-content gimmie-a-little-padding">
  <div class="tab-pane active" id="tab1">This is tab 1</div>
  <div class="tab-pane" id="tab2">This is tab 2</div>
  <div class="tab-pane" id="tab3">This is tab 3</div>
  <div class="tab-pane" id="tab4">This is tab 4</div>
  <div class="tab-pane" id="tab5">This is tab 5</div>
  <div class="tab-pane" id="tab6">This is tab 6</div>
  <div class="tab-pane" id="tab7">This is tab 7</div>
  <div class="tab-pane" id="tab8">This is tab 8</div>
</div>

<button onclick="move()">Go !</button>