ui-tabs 无法正常工作

Question

我使用了 ui-tabs，这是我使用的代码：

<script type="text/javascript">
  $(function () {
    $('#tabs').tabs({ event: '' });
  });

  function validateContact() {
    var fname = $('#first_name1').val();

    if (fname == '') {
      alert("Enter Name");
    } else {
      $('#tabs').tabs({ event: 'click' });
      doitcontact();
    }
  }

  function doitcontact() {
    var cnt = $("#frmdocontact").serialize();

    $.ajax({
      type: "POST",
      url: "doitcontact.php",
      data: cnt,

      success: function (msg) {
        var spt = msg.split('#$@$');
        //alert(spt);

        $('#hid_uid').val(spt[0]);
        $('#custom').val(spt[0]);

        $('#hid_add_vehicle').val(spt[0]);
        $('#hid_saleid').val(spt[1]);

        var valreturn = $("#return").val();

        if (valreturn) {
          valreturn = valreturn + "?cntdoit=" + spt[0];
          $("#return").val(valreturn);
        }

        //alert(msg);
        //console.log(contactSent);
        var pkg = $('input:radio[name=pkg]:checked').val();

        var $tabs = $('#tabs').tabs();
        var selected = $tabs.tabs('option', 'selected');
        $tabs.tabs('select', selected + 1);
        //window.location="thankyou.php"
      }
    });

  }
</script>

<ul>
  <li id="tabVInfo"><a href="#tabs-2">Contact Information</a></li>
  <li id="tabVCond"><a href="#tabs-3">Vehicle Information</a></li>
  <li id="tabVPhoto"><a href="#tabs-4">Additional Vehicle Information</a></li>
  <li id="tabVCheck"><a href="#tabs-5">Check Out</a></li>
</ul>

<div id="tabs-2">
  <form id="frmdocontact" name="frmdocontact" method="post">
    <input id="first_name1" maxlength="40" name="first_name" size="20" type="text" />
    <input type="button" id="sub" name="sub" value="Next >>" class="next-product" onclick="validateContact();" />
  </form>
</div>

<div id="tabs-">hhhhhhhhh</div>
<div id="tabs-4">kkkkkkkk</div>
<div id="tabs-5">llllllllll</div>

我想在页面加载时删除 clicked 事件。这工作正常。 然后，如果已经填写了数据，我必须能够单击选项卡。因此，如果我填写了第 1 页和第 2 页并且在第 3 页，那么他们应该能够单击 1 或 2 选项卡，并且其中应该包含已经输入的数据。

这里的第 1 页和第 2 页表示 div。在我的代码中，当我加载页面时，选项卡不可点击。然后我将数据输入到第 1 页并单击 nex 按钮，然后它转到第 2 页，所有选项卡现在都是可点击的。

但我实际上需要将第 1 页标签页设为可点击。

我该怎么做？

谁能解决？

如果有任何解决方案？......

尽快给出解决方案…………

Answer 1

只需删除标签调用中的 {event: ''} 即可启用所有点击。然后更改要禁用的选项卡的 HREF。在此示例中，我禁用了结帐选项卡。

$("#tabs").tabs();
$("#tabVCheck > a").attr("href", "#");

你可以在这里测试它： http://jsfiddle.net/nKsZF/28/