用户界面选项卡无法正常工作 [英] The ui-tabs not working correctly

问题描述

我用过ui-tabs，这是我用过的代码:

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>

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

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.

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

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.

但是我实际上需要按一下页面1标签.

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

我该怎么做?

有人可以解决吗?

是否有解决方案?.............

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

尽快提供解决方案........

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

推荐答案

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

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", "#");

您可以在这里进行测试: http://jsfiddle.net/nKsZF/28/

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

这篇关于用户界面选项卡无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！