阿賈克斯成功回調意外行爲

Question

我有一個href鏈接爲我的unordered列表。

第一次加載頁面時，只有歡迎頁面可以正常顯示。

當我在頁面加載後第一次單擊列表時，在單擊ul li上的href鏈接後，我會在所需div上得到想要的結果。

但是，如果我隨後點擊其他選項卡，結果會顯示在我之前點擊過的那個上。例如，如果我點擊href＃tab2a，結果將顯示在#tab2b上，反之亦然。 AJAX會將結果導向我之前點擊的div。

我在這裏不知所措！我如何強制結果顯示在由href id標記引用的div中？我正在使用if if else條件;這是正確的方法嗎？

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()代碼包裝成EW功能，並通過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); 
}