jquery - 根据当前错误选择jQuery标签页

Question

我正在努力在Web应用程序中获取一个选项卡，以显示所选的IF如果其中存在错误，因为我有一个跨越两个选项卡的表格。目前，如果出现错误，用户将无法在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

据我了解，如果出现错误消息，您希望将选项卡设置为 Activity 状态。检查这是否是您想要的，或者让我知道这里是否还缺少其他内容。

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上应用了一个过滤器。如果找到，它将返回该跨度。然后，我们可以找到出现该错误消息的选项卡并将其设置为 Activity 状态。