Question

我正在使用jQuery通過ajax加載節。我想製作一個非常通用，緊湊的功能，根據點擊標籤加載相應的部分。

這是棘手的部分。

我想採取被點擊的選項卡的類，並追加將加載與選項卡具有類的URL。 這是我到目前爲止，我相信它可以變得更緊湊。

JS：

$.ajaxSetup ({ 
    cache: false 
}); 
var ajax_load = "<img src='../../images/icons/loading.gif' alt='loading...' />"; 

var loadUrl = "/include/?section=accountsettings&view="; 

$("#accountsettings").html(ajax_load).load(loadUrl + "accountsettings"); 

$(".filterCat a").click(function(){ 
    $("#contentSm div").fadeOut(200); 
}); 

$(".accountsettings").click(function(){ 
    $("#accountsettings").html(ajax_load).load(loadUrl + "accountsettings"); 
    $("#accountsettings").delay(250).fadeIn(250); 
}); 

$(".editprofile").click(function(){ 
    $("#editprofile").html(ajax_load).load(loadUrl + "editprofile"); 
    $("#editprofile").delay(250).fadeIn(250); 
}); 

$(".notifications").click(function(){ 
    $("#notifications").html(ajax_load).load(loadUrl + "notifications"); 
    $("#notifications").delay(250).fadeIn(250); 
}); 

$(".broadcast").click(function(){ 
    $("#broadcast").html(ajax_load).load(loadUrl + "broadcast"); 
    $("#broadcast").delay(250).fadeIn(250); 
}); 

$(".import").click(function(){ 
    $("#import").html(ajax_load).load(loadUrl + "import"); 
    $("#import").delay(250).fadeIn(250); 
}); 

HTML：

<div id="filter" class="span-3"> 
    <div id="accountSettingsTabs"> 
     <div class="filterCat section"> 
      <a class="accountsettings sel"><span class="wIcon accountSet"></span>Account</a> 
      <a class="editprofile"><span class="wIcon send"></span>Edit Profile</a> 
      <a class="notifications"><span class="wIcon emailNoti"></span>Notifications</a> 
      <a class="broadcast"><span class="wIcon broadcast"></span>Broadcast</a> 
      <a class="import"><span class="wIcon import"></span>Import</a> 
     </div> 
    </div> 
</div> 
<div id="contentSm" class="span-8"> 
    <div id="accountsettings" class="section"></div> 
    <div id="editprofile" class="section"></div> 
    <div id="notifications" class="section"></div> 
    <div id="broadcast" class="section"></div> 
    <div id="import" class="section"></div> 
</div> 

於是我找追加/包括/節= accountsettings &視圖=與第一類點擊的錨？ 我會嘗試你能想到的任何事情！謝謝！

Answer 1

這樣

<a class="ajaxifiedTab notifications" _param="notifications" /> 

的Javascript

var loadUrl = "/include/?section=accountsettings&view="; 
jQuery(function(){ 
    jQuery('.ajaxifiedTab').bind('click',function(e){  
     e.preventDefault(); 
     var _class=jQuery(e.target).attr('_param'); 
     jQuery.ajax({ 
      url:loadUrl +_class, 
      type:'get', //or post as u think 
      success:function(data){ 
       jQuery('#'+_class).html(data); 
      } 
     }); 
    }); 
});