Question

我在第二个标签上带有提交按钮的表单形式中有以下标签结构。标签是否可以在特定条件下自动更改？

<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>

<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>

Answer 1

如果不知道你想要什么条件或者看到HTML结构之外的任何代码（并且没有任何CSS），很难回答这个问题。

我假设点击锚点会改变标签，所以你需要做的就是给它们添加id：

<li><a data-toggle="tab" href="#menu1" id="tab1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2" id="tab2">Menu 2</a></li>

然后，如果您使用jQuery，请执行以下操作：

if(/*whatever condition you want*/){
  $('#tab2').click();
}

否则：

if(/*whatever condition you want*/){
  document.getElementById('tab2').click();
}

Answer 2

您正在寻找的内容称为多步骤表单或表单向导。

google上有很多关于如何实现这种解决方案的例子以及许多提供此类功能的JavaScript和jQuery模块/库。

使用bootstrap向导可以在JQ Purfect的JSFiddle中找到一个示例： http://jsfiddle.net/JQPurfect/nGnbJ/2/

$(document).ready(function () {
    $('#rootwizard').bootstrapWizard({
        onTabShow: function (tab, navigation, index) {
            var $total = navigation.find('li').length;
            var $current = index + 1;
            var $percent = ($current / $total) * 100;
            $('.bar').text($percent.toFixed(0) + '%');
            $('#rootwizard').find('.bar').css({
                width: $percent + '%'
            });
        }
    });
    window.prettyPrint && prettyPrint()
});

或者按照这个：https://www.npmjs.com/package/jquery-simple-wizard

Answer 3

您可以使用引导选项卡javascript引用来操作选项卡以根据条件执行某些操作。您可以在http://www.w3schools.com/bootstrap/bootstrap_ref_js_tab.asp看到javascript参考。如果您尝试显示标签，那么您应该能够使用以下内容：

$('.nav-tabs a[href="#menu2"]').tab('show')

我不知道你想要切换选项卡的条件我做了一个小提示只用一个点击功能，但你可以使用你想要显示标签的任何功能。

这是一个小提琴Fiddle

自动切换html标签

3 个答案: