Question

请在此处参阅我的JS Fiddle。

我在顶部使用Bootstrap标签，以及＆＃39;菜单＆＃39;显示或隐藏的标签取决于我放在＆＃39; Home＆＃39;中的范围滑块。标签。目前我将其限制为3个菜单选项卡，因此如果我将范围滑块向右拖动，菜单选项卡将逐个显示，直到滑块一直到达结尾，在本例中为3个选项卡。反之亦然 - 向左拖动滑块将逐个隐藏菜单选项卡，直到没有。这完美无缺。

$('#menutab').on('input', function() {
      if ($(this).val() === "1") {
        $("#menu1tab").show();
        $("#menu2tab").hide();
        $("#menu3tab").hide();
      } else if ($(this).val() === "2") {
        $("#menu1tab").show();
        $("#menu2tab").show();
        $("#menu3tab").hide();
      } else if ($(this).val() === "3") {
        $("#menu1tab").show();
        $("#menu2tab").show();
        $("#menu3tab").show();
      } else {
        $("#menu1tab").hide();
        $("#menu2tab").hide();
        $("#menu3tab").hide();
      }
    });

但是，如果我想将标签数量扩展到20个标签或更多标签，那么我必须重复写很多$("#menu**x**tab").show()和$("#menu**x**tab").hide()，而且我不会这样做。认为这是一种非常有效的编码方式。

如果有人能写出更短/更有效的方法，我将非常感激。 JS或JQ中的任何一个对我都没问题。

Answer 1

使用bootstrap，类.hidden-（xs-sm-md-lg-xl）-up或.hidden-（xs-sm-md-lg-xl）-down

    ex:
   <div hidden-xs-up>
    </div>

你只能在xs display

上查看这个div

https://v4-alpha.getbootstrap.com/layout/responsive-utilities/ 对不起

for (i = 0; i < *munulong*; i++) { 
  ('#menutab').on('input', function() {
      if ($(this).val() === i) {
        $("#menu"+i+"tab").show();
      } else {
        $("#menu"+i+"tab").hide();
      } 
    });
}

我不确定，但如果你想要你可以测试它

根据范围输入显示/隐藏Bootstrap选项卡/药丸

1 个答案: