根据存在的错误选择 jQuery 选项卡

Question

我正在努力在我的 Web 应用程序中获取一个选项卡，以在其中出现错误时显示选定的选项，因为我有一个跨越两个选项卡的表单。目前，如果出现错误，用户无法在 tabs-2 中看到错误消息，并且他们不知道要修复什么。我有以下代码：

HTML：

<div id="tabs">
  <ul>
    <li><a id="Tab-1" href="#tabs-1">Tabs 1</a></li>
    <li><a id="Tab-2" href="#tabs-2" ">Tabs 2</a></li>
  </ul>
  <div style="display:block;" id="tabs-1" class="tab-content" name="content">
    <span>Content here</span>
  </div>
  <div style="display:block;" id="tabs-2" class="tab-content" name="content">
    <span id="ETError" class="error-template"></span>
    <span class="error-message">Must enter at least one more</span>
  </div>
</div>

JS：

<script>
  var $j = jQuery.noConflict();

  $j(function() {
    $j( '#tabs' ).tabs();
    $j('#tabs > div').each(function(i) {
      if($j(this).find('#ETError.error-message').length < 0)
        $j('#tabs').tabs('select', i);
    });
  });
</script>

Answer 1

据我了解，如果出现错误消息，您希望将选项卡设置为活动状态。如果这就是你想要的，请检查这个，或者如果我在这里缺少其他东西，请告诉我。

var $j = jQuery.noConflict(); 
var $tabs = $j( '#tabs' ).tabs();       

$j("button").click(function(){
    var $errorSpan = $j("span").filter(function(index){        
        if($j(this).hasClass("error-message"))
        return $j(this);
    });

    var errorTabIndex = $j(".tab-content").index($errorSpan.closest(".tab-content"));

    console.log(errorTabIndex);

    // for jQuery < 1.10
    $tabs.tabs({
        selected: errorTabIndex
    });

    //for jQuery >= 1.10
    $tabs.tabs( "option", "active", errorTabIndex);

});

我添加了处理程序来检查按钮点击时的error-div。您可能希望将其设置为表单提交或其他方式。

DEMO HERE

更新

所做的是，在span.error-message 上应用了一个过滤器。如果找到任何它返回该跨度。然后我们可以找到出现该错误消息的选项卡并将其设置为活动状态。