Question

我有一个带有导航栏的页面，我正在使用 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添加到下拉列表

＆＃13;

$('#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");
}

＆＃13;

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

＆＃13;

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

1 个答案: