The ui-tabs not working correctly

问题:

I used ui-tabs ,this is the code iam used:

<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>

I want to remove the clicked event when the page is loaded.That is working correctly. Then i have to be able to click on tabs if already filled out data. so if i filled out page 1 and 2 and am on 3 then they should be able to click on the 1 or 2 tab and it should have the already entered data in it.

Here page 1 and 2 means divs.In my code when i load the page the tabs are not clickable.Then i enter datas into page 1 and click on nex button then it goes to 2nd page and all tabs are now clickable.

But i actually need to page 1 tabs pnly shoud be clickable.

How can i do this?

Can anyone have solve it?

if there is any solution for that?.............

Give a solution ASAP...........

回答1:

Just remove the {event: ''} inside your tabs calling to enable all clicks. Then you change the HREF of the tab you want to disable. In this example I have disabled the check out tab.

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

you can test it here: http://jsfiddle.net/nKsZF/28/