Ajax 成功回调意外行为

Question

我的unordered 列表有一个href 链接。

第一次加载页面时，只有欢迎页面按预期显示。

当我在页面加载后第一次单击列表时，在单击 ul li 上的 href 链接后，我在所需的 div 上得到了所需的结果。

但是，如果我随后单击另一个选项卡，结果将显示在我之前单击的选项卡上。例如，如果我单击href #tab2a，结果将显示在#tab2b 上，反之亦然。 AJAX 会将结果定向到我之前单击的 div。

我在这里不知所措！如何强制结果显示在 href id 标签引用的 div 中？我正在使用 if else if 条件；这是正确的方法吗？

JS

$(document).ready(function() {
      $("#tab2").hide();
      $("#tab3").hide();
      $("#tab6").hide();
      $("#tab2a").hide();
      $("#tab2b").hide();
      $('ul li a').click(function() {
        href = undefined;
        if (($(this).attr('href')) == "#tab2a") {
          var href = $(this).attr('href');
          $.ajax({
            url: "http://mypage1_action=execute"
          }).done(function(data) {
            $(href).html(data);
          });
          $(href).show();
          $('form#tab div:not(' + href + ')').hide();
        } else if (($(this).attr('href')) == "#tab2b") {
          var href = $(this).attr('href');
          $.ajax({
            url: "http://mypage1_action=execute"
          }).done(function(data) {
            $(href).html(data);
          });
          $(href).show();
          $('form#tab div:not(' + href + ')').hide();
        } else {
          $(href).show();
          $('form#tab div:not(' + href + ')').hide();
        };
      });

HTML

<form id="cssmenu">
  <ul>
    <li class='active'><a href='#tab1'><span>Home</span></a>
    </li>
    <li class='has-sub'><a href='#tab2'><span>Tab2</span></a>
      <ul>
        <li><a href='#tab2a'><span>Tab 2a</span></a>
        </li>
        <li><a href='#tab2b'><span>Tab 2b</span></a>
        </li>
        <li class='last'><a href='#tab2c'><span>Tab 2c</span></a>
        </li>
      </ul>
    </li>
    <li class='has-sub'><a href='#tab3'><span>Tab 3</span></a>
      <ul>
        <li><a href='#'><span>Tab 3a</span></a>
        </li>
        <li><a href='#'><span>Tab 3b</span></a>
        </li>
        <li class='last'><a href='#'><span>Tab 3c</span></a>
        </li>
      </ul>
    </li>
    <li class='has-sub'><a href='#tab4'><span>Tab 4</span></a>
      <ul>
        <li><a href='#'><span>Company</span></a>
        </li>
        <li class='last'><a href='#tab5'><span>Contact</span></a>
        </li>
      </ul>
    </li>
    <li class='last'><a href='#tab6'><span>Contact</span></a>
    </li>
  </ul>
</form>

<form id="tab" class=".allclass">
  <div id="tab1" class='active'>
    <h1>Welcome Page</h1>
  </div>
  <div id="tab2">
  </div>
  <div id="tab2a">
  </div>
  <div id="tab2b">
  </div>
  <div id="tab3">
  </div>
  <div id="tab6">
  </div>
</form>

这里是小提琴：https://jsfiddle.net/kBoni/1ag0ymh/#&togetherjs=m9pPoV3yoy

Answer 1

这可能是因为在.done() 执行时，href 变量的值可能已更改，因为您单击了另一个选项卡，避免这种情况的简单方法是包装 ajax() 代码进入一个新函数，并将href 值作为参数传递

function changeTab(href) {
  $.ajax({
    url: "http://mypage1_action=execute"
  }).done(function(data) {
    $(href).html(data);
  });
  $(href).show();
  $('form#tab div:not(' + href + ')').hide();
}

$(document).ready(function() {
  $("#tab2,#tab3,#tab6,#tab2a,#tab2b").hide();
  $('ul li a').click(function() {
    href = undefined;
    if (($(this).attr('href')) == "#tab2a") {
      var href = $(this).attr('href');
      changeTab(href);
    } else if (($(this).attr('href')) == "#tab2b") {
      var href = $(this).attr('href');
      changeTab(href);
    } else {
      $(href).show();
      $('form#tab div:not(' + href + ')').hide();
    };
  });
});

现在，如果您还想为每个选项卡设置不同的 url（您可能会这样做），您可以将其作为 data-attribute 添加到您的 a 并将其传递给函数：

function changeTab(href,url) {
  $.ajax({
    url: url
  }).done(function(data) {
    $(href).html(data);
  });
  $(href).show();
  $('form#tab div:not(' + href + ')').hide();
}
.
.
.
if (($(this).attr('href')) == "#tab2a") {
  var href = $(this).attr('href');
  var url = $(this).attr('data-url');
  changeTab(href,url);
}