Question

我在asp.net页面下面有代码来显示使用bootstrap的标签。我可以毫无问题地点击标签。但是现在我想用下一个＆＃34;＆gt;＆＃34;逐个选择它们。按钮。因此，当页面加载Price_1处于活动状态时，当我点击＆＃34;＆gt;＆＃34;应选择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>

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

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

Bootstrap: next button should display next tab

请帮忙。

Answer 1

问题是你包含jQuery两次可能会导致冲突，1.6.x对于Bootstrap来说太旧了。删除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#

Answer 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之后执行代码。

如何使用＆＃34; next＆＃34;选择引导选项卡按钮。我已经按照其他答案但没有工作

2 个答案: