There is a menu

<ul class="nav nav-tabs nav-stacked main-menu mainmenu_user"> <li class="active"><a href="/settings/" data-history="/settings/" data-href="/ajax/settings.php"><span class="hidden-tablet"> Настройки</span></a></li> <li class="active"><a href="/settings/" data-history="/settings2/" data-href="/ajax/settings2.php"><span class="hidden-tablet"> Настройки2</span></a></li> <li class="active"><a href="/settings/" data-history="/settings3/" data-href="/ajax/settings3.php"><span class="hidden-tablet"> Настройки3</span></a></li> </ul>

I am trying to write a script that would take the value from data-href and get json from there, I would also like to insert the data-history parameter into the address bar, but I have not yet understood how to do it

 $(document).ready(function(){ $('.mainmenu_user li a').click(function(){ var url_ajax = $(".mainmenu_user li a").data("href"); $.getJSON(url_ajax, {}, function(json){ $('.content').html(''); }); }) });

    1 answer 1

    Well, if for modern browsers, then history.pushState (null, null, link.href);

    For all others, you can connect polyfill, for example - HTML5-History-API

    Example:

     $(document).ready(function(){ $('.mainmenu_user li a').click(function(evt/**$.Event*/){ evt.preventDefault(); var ajaxUrl = $(this).data("href"); var historyUrl = $(this).data('history'); history.pushState(null, null, historyUrl); $.getJSON(ajaxUrl, {}, function(json){ /* __ */ }); }) });
    • The fact is that so far even ajax does not work with this script. The page is reloading, the console is empty. - Tchort
    • :] Took your script and did not check it, corrected it. jsfiddle.net/6Wfk4 - RubaXa
    • And how else can you remove the class active from this menu item and substitute the new one? - Tchort
    • jsfiddle.net/6Wfk4/1 - so go? - RubaXa
    • yes, thank you very much - Tchort