ui-tabs无法正常工作

时间:2012-08-31 06:31:52

标签: javascript jquery jquery-ui-tabs

我使用了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>

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

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

但实际上我需要第1页标签才能点击。

我该怎么做?

有人能解决吗?

如果有解决办法吗?.............

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

1 个答案:

答案 0 :(得分:0)

只需移除标签内的{event:''}即可启用所有点击。然后更改要禁用的选项卡的HREF。在此示例中,我已禁用签出选项卡。

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

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