Question

滚动到更新＃2

加载页面时，默认情况下会选中“分析”标签，我会调用“分析”标签功能从服务器加载内容。这似乎工作正常......

现在，如果我再次点击该“分析”标签，则会加载内容，例如1秒后页面会刷新。

我尝试将return false;语句添加到每个JS函数中，也尝试了JQuery的event.preventDefault();而没有运气。不知道这里发生了什么，我不认为它的内容是从服务器回来的，因为就像我说的那样;页面加载正常，内容加载到googleAnalyticsTab div。

关于可能导致这种情况的任何想法！？

<div id="googletabs" class="tabs-no-bg tabs-no-border">
    <ul class="ui-tabs-nav">
        <li class="first"><a href="#googleAnalyticsTab" onclick="loadAnalyticsTab();return false;">Analytics</a></li> 
        <li><a href="#googleDFATab" onclick="loadDFATab(); return false;">DFA</a></li>
        <li><a href="#googleVoiceTab" onclick="loadVoiceTab(); return false;">Voice</a></li> 
    </ul>
</div>

<div id="googleAnalyticsTab">
</div>

<div id="googleDFATab">  
</div>

<div id="googleVoiceTab">  
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $('#googletabs').tabs();

        loadAnalyticsTab()

        $('#googleAnalyticsTab').on('click', function(event) {
            event.preventDefault(); loadAnalyticsTab();
        });
    });

  function loadAnalyticsTab() {
       var uri = '/Admin.mvc/Admin/GoogleAPICredentialsAnalyticsTab?companyId=' + getCompanyId();
      $.ajax({
          url: uri,
          type: 'get',
          async: true,
          success: function(data) {
              $('#googleAnalyticsTab').html(data);
              return false;
          },
          error: function(xhr) {
              $('#googleAnalyticsTab').removeClass('isloaded');
              return false;
          }
      });
      return false;
  }

  function loadDFATab() {
      return false;
  }

  function loadVoiceTab() {
      return false;
  }
</script>

更新＃1

在对代码进行一些更改后，我试图找出问题。

<script type="text/javascript">
    $(document).ready(function() {
        $("#googletabs").tabs({
            activate: function(event, ui) {
                //Select the correct tab and run function
                switch (ui.index) {
                    case 0:
                        //Analytics tab
                        event.preventDefault();
                        loadAnalyticsTab();
                        break;
                    default:
                        //Do nothing
                        break;
                }
            }
        });
    });

    function loadAnalyticsTab() {

        return false;
    }

    function loadDFATab() {
        return false;
    }

    function loadVoiceTab() {
        return false;
    }
</script>



<div id="googletabs" class="tabs-no-bg tabs-no-border">
    <ul class="ui-tabs-nav">
        <li><a href="#googleAnalyticsTab">Analytics</a></li> 
        <li><a href="#googleDFATab">DFA</a></li>
        <li><a href="#googleVoiceTab">Voice</a></li> 
    </ul>
    <br/>
        <div id="tab-1">
            <div id="googleAnalyticsTab">
            </div>
        </div>

        <div id="tab-2">
            <div id="googleDFATab">  
            </div>
        </div>

        <div id="tab-3">
            <div id="googleVoiceTab">  
            </div>
        </div>
</div>

更新＃2

我发现了这个问题，但它与我发布的代码没有直接关系。父标签是“Google API”，如果我单击此父标签，它会加载用户控件（上面发布的代码）。

现在，当我点击其中一个子标签时出现问题，它与父标签的索引相冲突！因此，如果我单击第一个子选项卡（分析），它实际刷新页面，因为它将转到父TAB＃1 ....

我是否需要将孩子绑定到我选择的父标签？或者限制父母看到孩子？不知道该怎么做。

Answer 1

我为您做了编辑 FIDDLE

你有一些问题，比如ui.index

它是空的。你可以从事件中选择信息，所以请查看小提琴：）

进行调试，使用控制台并查看您传递的变量中的内容：

console.log(event); 
// will post the event object to the console and let you browse it

console.log(ui);
// does the same like top just with a oter var :)

HTML

<div id="googletabs" class="tabs-no-bg tabs-no-border">
    <ul class="ui-tabs-nav">
        <li><a href="#googleAnalyticsTab">Analytics</a></li> 
        <li><a href="#googleDFATab">DFA</a></li>
        <li><a href="#googleVoiceTab">Voice</a></li> 
    </ul>
    <br/>
        <div id="tab-1">
            <div id="googleAnalyticsTab">
            </div>
        </div>

        <div id="tab-2">
            <div id="googleDFATab">  
            </div>
        </div>

        <div id="tab-3">
            <div id="googleVoiceTab">  
            </div>
        </div>
</div>

jQuery

$(document).ready(function() {
    $("#googletabs").tabs({
        activate: function(event, ui) {
            //Select the tabs value to work with
            var tabValue = event.currentTarget.innerHTML;
            //safer is to select the tabs id :)
            var tab = event.currentTarget.id;//.split("-");
            console.log(tabValue);
            console.log(tab);
            switch (tab) {
                case "ui-id-1":
                    //Analytics tab
                    event.preventDefault();
                    loadAnalyticsTab();
                    break;
                default:
                    //Do nothing
                    break;
            }
        }
    });
});

function loadAnalyticsTab() {
    alert('analytics fired!');
    return false;
}

function loadDFATab() {
    return false;
}

function loadVoiceTab() {
    return false;
}

Answer 2

我通过使用选项卡名称而不是选项卡索引修复了选项卡问题，用于父选项卡。

父页面正在加载一组选项卡，对于其中一些选项卡，我有子选项卡。子选项卡与父选项卡的索引冲突;每次我点击子选项卡时，该选项卡的索引将由父选项卡加载并同时打开另一个页面。

要解决此问题，我检索了标签名称并使用了切换块，在父级中选择了正确的标签。这样，当单击子选项卡时，父级将知道名称而不是全局索引值。

要选择标签名称，我使用了以下内容：

$('#tabs').bind('tabsselect', function(event, ui) {

      var tabName = $(ui.tab).text();

      switch (tabName) {
          case "View Templates":
              //Code here for Parent 1
              break;

          case "Google APIs":
              //Code here for Parent 2
              break;
      }
});

子选项卡与父选项卡冲突。父看到索引并加载另一个页面

更新＃1

更新＃2

2 个答案: