HTML/引导选项卡

Posted 2023-05-08

【中文标题】HTML/引导选项卡

【英文标题】：HTML/Bootstrap Tabs

【发布时间】：2012-10-23 06:54:24

【问题描述】：

我已经把头撞在墙上一天了，现在想弄清楚一些简单的标签操作。我有 3 个选项卡，每个选项卡都包含表单的不同部分。当用户在第一个时，我需要禁用第二个和第三个。然后，当填写第一页并单击继续并且验证返回 true 时，我可以启用第二个选项卡并滑动到该选项卡。然后当他们完成第二页时，点击继续，验证返回 true，我可以启用第三个选项卡并滑入其中。主要的是我需要禁用这些选项卡，直到它们当前所在的选项卡得到验证。所以这是我的html：

<ul class="nav nav-tabs" id="myTab">
  <li><a href="#options">Options</a></li>
  <li><a href="#information">Information</a></li>
  <li><a href="#payment">Payment</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="options">
    <form id="frmtype1" action="" name="frmtype1" method="post">
        <header>Registration Options</header>
        <br/>
        <label for="Reg_type1" class="checkbox">
            <input type="radio" name="Reg_type" id="Reg_type1" value="1"/>
        Registering myself with credit card or bank account
        </label>
        <br>
        <label for="Reg_type2" class="checkbox">
            <input type="radio" name="Reg_type" id="Reg_type2" value="2"/>
        Registering multiple people using credit card or bank account
        </label>
        <br>
        <label for="Reg_type3" class="checkbox">
            <input type="radio" name="Reg_type" id="Reg_type3" value="3"/>
        Registering using a purchase order
        </label>
        <div class="form-actions">
            <button class="btn" type="submit">Continue</button><span class="help-inline" style="display:none;">Please choose an option</span>
        </div>
    </form>             
  </div>
  <div class="tab-pane" id="information">...</div>
  <div class="tab-pane" id="payment">...</div>
</div>

然后是我的 jquery：

var val1 = $('#frmtype1').validate(
$('#myTab a[href="#information"]').tab('disabled'); //i have no idea how to prevent the user from navigating here so I just put disabled. Didn't work obviously
$('#myTab a[href="#payment"]').tab('disabled');
    errorPlacement: function(error, element) , //this is to prevent the standard error message from showing, rather you use the inline-text
    rules: 
        'Reg_type': 
            required: true
        
    
);

$('#frmtype1').submit(function(e) 
    /*This will validate the first page, if the user didn't select an option then it will display
    the inline text as an error message*/
    if(val1.form()) 
        $('.help-inline').hide();

     else 
        $('.help-inline').show();
        return false;
    
);

$('#myTab a').click(function (e) 
  e.preventDefault();
  $(this).tab('show');
)

首先，在当前选项卡的表单被验证为真之前，如何禁用后续选项卡？

【参考方案1】：

基于default tabs from Twitter Bootstrap，我的方法是仅在需要时激活选项卡插件（因为选项卡实际上是禁用的，除非您激活它）：

function activateTab(selector) 
    $(selector).on('click.twbstab',function()  $(this).tab('show'); )
        .closest('.disabled').removeClass('disabled');


activateTab('#myTab a:first');

然后您可以使用验证过程来激活选项卡。

检查demo on jsfiddle。我使用了一个额外的类来显示一个选项卡被禁用。

<ul class="nav nav-tabs" id="myTab">
    <li class="disabled active"><a href="#home">Home</a></li>
    <li class="disabled"><a href="#profile">Profile</a></li>
    <li class="disabled"><a href="#messages">Messages</a></li>
    <li class="disabled"><a href="#settings">Settings</a></li>
</ul>

.nav-tabs li.disabled  color: grey; 
.nav-tabs li.disabled a:hover  border-color: transparent; 

您也可以在激活后使用类似的方法禁用选项卡：

function deactivateTab(selector) 
    $(selector).off('click.twbstab')
        .closest('li').addClass('disabled');

【参考方案2】：

jQuery UI 选项卡当然可以让您动态添加选项卡 - 参见演示 here

代码的关键行是：

tabs.find( ".ui-tabs-nav" ).append( ... );//adds a new tab
tabs.append( ... );//append content top be selected by the new tab
tabs.tabs( "refresh" );//updates the internals and the screen

我确信其他标签插件提供相同或相似的功能。

另一个选项是EasyTabs，它允许标签是“可取消的”（参见页面底部附近的“可折叠和可取消”演示） - 即。只有在满足某些条件时才能选择它们（演示中的确认对话框，但可能是您喜欢的任何内容）。这可能比动态添加标签更简单、更理想。