Javascript Ajax成功回调意外行为

我的无序列表有一个href链接

当页面第一次加载时，只有欢迎页面按预期可见

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

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

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

JS

HTML

---

这是一个小问题：

这可能是由于执行.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，您可以将其作为数据属性添加到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);
} 

---

我正试图上传我当前的HTMLUpdate。我道歉。wifi中断小提琴坏了

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();
    };
  });
});

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);
}