enter image description here

How to make such ajax selection?

Taba did, but how to continue on the button to continue the selection?

It turns out when you click on the tab I get ?tab=1 Tab ?tab=1

Next, when you press the button 1, 2, etc. should i get ?tab=1&sub=11

I can not understand what to php and ajax need to write? And I can not find an example.

 <div id="ajax-reload"> <div class='tab'> <div class='tab-header'> <div class='tab' data-tab='1'>Таб 1</div> <div class='tab' data-tab='2'>Таб 2</div> </div> <div class='tab-content'> <div class='subs'> <div class='sub' data-sub='11'>Кнопка 1</div> <div class='sub' data-sub='22'>Кнопка 2</div> <div class='sub' data-sub='33'>Кнопка 1</div> </div> <div class='subs-content'> <div class='item'>Текст 1</div> <div class='item'>Текст 2</div> <div class='item'>Текст 3</div> </div> </div> </div> </div> $(function() { $('.tab').on('click', function() { var $data_tab; $data_tab = $(this).attr('data-tab'); $.get("URL_PAGE", { tab: $data_tab }) .done(function(data) { $("#ajax-reload").html(data); }); }); }); $tab = $_GET['tab']; //Подгружаем объекты по нажатию на таб if(isset($tab)){ $query_where = "Sub_ID=$tab"; }
  • To interact with the database, you need to write a php-function that will fetch the database from the required parameter, then this data needs to be given in json format, after receiving the data in JS, you need to parse it and generate html-code. -

2 answers 2

Next, when you press the button 1, 2, etc. should i get ?tab=1&sub=11 .

I can not understand what to php and ajax need to write?

The easiest way to add a data-tab for the .sub data-tab , after which it will become very easy for you to get the tab and sub . In your case, if we assume that when you click on the tab , it adds the class active (or another other, which adds the style of the active tab), we get the following:

 $(document).on("click", ".sub", function() { var sub = $(this).data("sub"); var tab = $(".tab.active").data("tab"); console.log("?tab=" + tab + "&sub=" + sub); }); 
 .tab-content { width: 618px; } .tab-content, .tab-header .tab, .sub, .item { border: 2px solid #EE497A; border-radius: 4px; padding: 10px; } .tab.active { background: #2D4565; color: #fff; } .tab-header .tab, .sub { width: 100px; display: inline-block; margin-right: 10px; cursor: pointer; } .tab-header .tab, .sub, .item { margin-bottom: 10px; } .item { font-size: 13px; height: 40px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="ajax-reload"> <div class='tab'> <div class='tab-header'> <div class='tab active' data-tab='1'>Таб 1</div> <div class='tab' data-tab='2'>Таб 2</div> </div> <div class='tab-content'> <div class='subs'> <div class='sub' data-sub='11'>Кнопка 1</div> <div class='sub' data-sub='22'>Кнопка 2</div> <div class='sub' data-sub='33'>Кнопка 1</div> </div> <div class='subs-content'> <div class='item'>Текст 1</div> <div class='item'>Текст 2</div> <div class='item'>Текст 3</div> </div> </div> </div> </div>

PS: if for some reason you don’t add the active or any other class for the active tab .tab , you’ll get the active tab using filter () .

  • A little bit wrong, but thanks. I got the idea. - Sincopa
 $(function() { $('.tab').on('click', function() { location.href = '?tab=' + $(this).attr('data-tab'); }); $('.sub').on('click', function() { location.href = '?<?=($_GET[tab] ? "tab=$tab_slc"."&" : NULL);?>sub=' + $(this).attr('data-sub'); }); }); $tab_slc = $_GET['tab']; $sub_slc = $_GET['sub']; if($tab_slc OR $sub_slc) { if($tab_slc) { $query_where_array[] = "Parent=$tab_slc"; } if($sub_slc) { $query_where_array[] = "Services=$sub_slc"; } $query_where = implode(" && ", $query_where_array); }

It remains to ajax'om