JQuery: добавление загруженного URL с классом триггера

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>

Так что яищу добавить / включить /? section = accountsettings & view = с первым классом кликающего якоря.Я постараюсь все, что вы можете придумать!Спасибо!

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