Question

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

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

当我在页面加载后第一次点击列表时，在点击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);
}

Ajax成功回调意外行为

1 个答案: