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

Posted 2023-05-08

【中文标题】根据范围输入显示/隐藏引导选项卡/药丸

【英文标题】：Show/hide Bootstrap tab/pill based on range input

【发布时间】：2017-09-26 08:12:43

【问题描述】：

请在此处参考我的JS Fiddle。

我在顶部使用 Bootstrap 选项卡，显示或隐藏的“菜单”选项卡的数量取决于我在“主页”选项卡中放置的范围滑块。目前我将其限制为 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 对我来说都可以。

【问题讨论】：

根据您今天提出的问题，“请为我改进”形式的问题被视为免费工作请求。请让您的问题更加集中。

【参考方案1】：

使用引导程序，类 .hidden-(xs-sm-md-lg-xl)-up 或 .hidden-(xs-sm-md-lg-xl)-down

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

你只能在 xs 显示器上查看这个 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();
       
    );

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

【讨论】：

感谢@Gioggi，但我认为这不适用于我的使用。如果您参考我上面的小提琴链接，您就会明白我想要实现的目标。不过还是谢谢。

如果你想测试它我改变 anwer

它不起作用@Gioggi，但没关系，尽管我确实考虑过使用循环作为你尝试的方法。如果其他人可以改进它，我会把它留给其他人。