Hello.

I'm trying to make tabs on Ajax. Everything works, but there are a couple of questions. Here is the markup

<ul> <li class="active"><a href="/post/{{ $post->slug }}" data-ajax-tab>Рекомендуемые</a></li> <li><a href="/post/{{ $post->slug }}/most-viewed" data-ajax-tab>Самые просматриваемые</a></li> <li><a href="/post/{{ $post->slug }}/popular" data-ajax-tab>Популярные<span>(0)</span></a></li> </ul>

Here is the script itself

 var ajaxLoader = $('[data-loader]'); $('[data-ajax-tab]').on('click', function(e){ e.preventDefault(); var link = $(this); var url = link.attr('href'); $('li.active').removeClass('active'); link.parent().addClass('active'); var contentArea = $('[data-post-content]'); contentArea.empty(); ajaxLoader.show(); setTimeout(function(){ $.get({ url: url, dataType: "html", success: function(template) { contentArea.append(template); ajaxLoader.hide() }, error: function(error) { } }) }, 2000); });

Now, if you go to the address site.name/post/bla-bla/popular , then the template is given, which, when you click on the tab популярные is given популярные . And how to make that the page would be loaded, and automatically the tab популярные became active?

And the second question, why query string does not change? I'm getting a het method. Tab is activated, and the address remains unchanged.

  • And about the second part of the question, you can write more? - Stanislav Belichenko February
  • @ Stanislav well, let's say I'm on the site.name/post/perviy-probniy-post page. Then, under the post, I press on the популярные tab. This tab has an address of the form site.name/post/perviy-probniy-post/popular , the tab is activated, popular posts appear. But the address of the site is site.name/post/perviy-probniy-post , why not `` site.name / post / perviy-probniy-post / popular`? I after all use $ .get ({}). Should he vedt go to this address? - Alex_01
  • that is, in the sense in the address bar of the browser that the address does not change? - Stanislav Belichenko
  • Yes. Here is an example of what I want to do. If you go to this address hotline.ua/computer-noutbuki-netbuki/… , then the page opens, and the tab with prices becomes active and loads the template - Alex_01

1 answer 1

The answer to the first part of the question is simply to remove the active class from the previous element and make it active from the necessary one. You are already trying to do this:

 $('li.active').removeClass('active'); link.parent().addClass('active');

Doesn't it work?

I will be able to answer the second part of the question later on how to concretize it. However, if I understand you correctly, then the $.get() function should not change the address bar of the browser, since its only function is to take some content via an ajax request. In essence, this is a wrapper for $.ajax() , which is made for the sake of clarity of code.

So, answering the second part of your request, you need to change the address bar yourself. This is done through the window object, or rather through window.history . There are both ready-made libraries and functions for working with it, and the ability to natively do what you want. Note that only when working with this object, the user will be able to receive the expected work from the browser history, when navigating through the history will work as it should when the content changes dynamically.

  • You did not understand. In the first part of the question, the problem is not in the active tab. An example cited in the comment above - Alex_01
  • Oh, I understand you. Sec - Stanislav Belichenko
  • @ Alex_01 updated the answer. - Stanislav Belichenko February