如何使用“下一步”按钮选择引导选项卡。我遵循了其他答案，但没有工作

Posted 2023-03-06

【中文标题】如何使用“下一步”按钮选择引导选项卡。我遵循了其他答案，但没有工作

【英文标题】：How to select bootstrap tabs using "next" button. I have followed other answers but not working

【发布时间】：2016-08-04 06:20:10

【问题描述】：

我在 asp.net 页面中有以下代码，用于使用引导程序显示选项卡。我可以毫无问题地单击选项卡。但现在我想使用下一个“>”按钮一一选择它们。因此，当页面加载 Price_1 处于活动状态并且当我单击“>”时，应该选择 price_2，依此类推。请给我一些建议。

代码在这里 https://codeshare.io/4SA8A

 <style>
     .next-tab 
      font-weight: bold;
      font-size: 18px;
                
    </style>
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
          <script type = "text/javascript" src = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>

   <script>

        $('.next-tab').click(function (e) 
            if ($('#tabs > .active').next('li').hasClass('next-tab')) 
                $('#tabs > li').first('li').find('a').trigger('click');
             else 
                $('.nav-tabs > .active').next('li').find('a').trigger('click');
            
            e.preventDefault();
        );

   </script>

        <ul class="nav nav-tabs" style="border-bottom:none"> 
            <li class="active"><a data-toggle="tab" href="#menu1">Price_1</a></li>
            <li><a data-toggle="tab" href="#menu2">Price_2</a></li>
            <li><a data-toggle="tab" href="#menu3">Price_3</a></li>
            <li><a data-toggle="tab" href="#menu4">Price_4</a></li>
            <li><a data-toggle="tab" href="#menu5">Price_5</a></li>
            <li><a data-toggle="tab" href="#menu6">Price_6</a></li>
            <li class="next-tab"><a href="">&gt;</a></li>
          </ul> 

我也尝试过这个解决方案，但它不起作用。当我单击“>”时，它将进入 IE 和谷歌浏览器的主页，它不会选择下一个选项卡，也不会刷新我不想要的页面。我认为这是因为href标签是空的

<li class="next-tab"><a href="">&gt;</a></li>

Bootstrap: next button should display next tab

请帮忙。

【问题讨论】：

呃...你的代码呢？

我完全按照这个链接尝试了。***.com/questions/33579195/…

【参考方案1】：

问题是您包含 jQuery 两次，这可能会导致冲突，并且 1.6.x 对于 Bootstrap 3 来说太旧了。删除 1.6.x 链接..

http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js

旧 jQuery 不起作用：http://bootply.com/gzlsfVTNq9

jQuery 1.9.x 或更高版本的作品：http://bootply.com/XYpxMIgink#

【讨论】：

谢谢。我删除了您建议的行，它起作用了。我从 W3schools try it editor 那里得到了那句话。

【参考方案2】：

您在 <a> 标签加载之前加载脚本，因此事件不会被绑定。以这种方式包含您的脚本：

<script>
$(function () 
  $('.next-tab').click(function (e) 
    if ($('#tabs > .active').next('li').hasClass('next-tab')) 
      $('#tabs > li').first('li').find('a').trigger('click');
     else 
      $('.nav-tabs > .active').next('li').find('a').trigger('click');
    
    e.preventDefault();
  );
);
</script>

另外，您需要在此处添加id="tabs"：

<ul class="nav nav-tabs" id="tabs" style="border-bottom:none">

$(function () ); 是$(document).ready(function () ); 的简写代码。这样可以确保在加载 DOM 之后执行代码。

【讨论】：

刚试过，现在什么都没有发生，甚至没有回发或刷新。

@Akshay 请参阅上面的更新答案。不要只是盲目地复制和粘贴人。了解您的工作。

@Akshay 你看到添加id="tabs"的更新答案了吗？

是的.. 但结果相同。

让我们continue this discussion in chat。