The task of this kind - there is a drop-down list in which the names of the tabs are recorded. It is necessary that when you click on a particular taboo in the drop-down list, it is added to the active tabs, and when you click on the delete icon, it is deleted. At what when adding, it is necessary that the name of the tab is removed from the drop-down list, and added when it is deactivated. But the most difficult part is to write to the database which tabs were activated in order for all users to display the ones that were selected. Drop-down list and tabs are implemented using bootsrap 3. How can I accomplish this task?

<div class="dropdown"> <p class="cursor_pointer" data-toggle="dropdown" class="dropdown-toggle"> Информационные базы <b class="caret"></b> </p> <ul class="dropdown-menu infobase_drop"> <li class="hover_li" data-metod="gib">База ГИБ</li> <li class="hover_li" data-metod="country">База стран</li> <li class="hover_li" data-metod="currenci">База валют</li> <li class="hover_li" data-metod="package">База пакетов</li> <li class="hover_li" data-metod="activitidirection">Направление деят-ти</li> <li class="hover_li" data-metod="branch">Отрасль</li> <li class="hover_li" data-metod="industrialdirection">Промышленное направление</li> <li class="hover_li" data-metod="measuri">Ед. Измерения</li> <li class="hover_li" data-metod="fo">Федеральный округ</li> <li class="hover_li" data-metod="region">Регион</li> <li class="hover_li" data-metod="logistic">Логистика</li> <li class="hover_li" data-metod="quality">Качество</li> </ul> </div> <div class="row content-nav-tabs"> <div class="col-xs-12"> <ul class="nav nav-tabs ul__for_tabs" role="tablist"> <li role="presentation" class="active"><a href="#baseGIB" aria-controls="baseGIB" role="tab" data-toggle="tab">База ГИБ</a><button></button></li> <li role="presentation"><a id="primeCountry" href="#baseWin2" aria-controls="baseWin2" role="tab" data-toggle="tab" data-name="searchCountry">База стран</a><button></button></li> <li role="presentation"><a id="primeCurrencies" href="#baseWin3" aria-controls="baseWin3" role="tab" data-toggle="tab" data-name ="searchCurrenci">База валют</a><button></button></li> <li role="presentation"><a href="#baseWin4" aria-controls="baseWin4" role="tab" data-toggle="tab" data-name="searchPackage">База пакетов</a><button></button></li> <li role="presentation"><a href="#baseWin5" aria-controls="baseWin5" role="tab" data-toggle="tab" data-name="searchActivitiDirection">Направление деят-ти</a><button></button></li> <li role="presentation"><a href="#baseWin6" aria-controls="baseWin6" role="tab" data-toggle="tab" data-name="searchMonitoringBranch">Отрасль</a><button></button></li> <li role="presentation"><a href="#baseWin7" aria-controls="baseWin7" role="tab" data-toggle="tab" data-name="searchIndustrialDirection">Промышленное направление</a><button></button></li> <li role="presentation"><a href="#baseWin8" aria-controls="baseWin." role="tab" data-toggle="tab" data-name="searchMeasuri">Ед. Измерения</a><button></button></li> <li role="presentation"><a href="#baseWin9" aria-controls="baseWin9" role="tab" data-toggle="tab" data-name="searchFo">Федеральный округ</a><button></button></li> <li role="presentation"><a href="#baseWin10" aria-controls="baseWin10" role="tab" data-toggle="tab" data-name="searchRegion">Регион</a><button></button></li> <li role="presentation"><a href="#baseWin11" aria-controls="baseWin11" role="tab" data-toggle="tab" data-name="searchLogistic">Логистика</a><button></button></li> <li role="presentation"><a href="#baseWin12" aria-controls="baseWin12" role="tab" data-toggle="tab" data-name="searchQualityMeasure">Качество</a><button></button></li> </ul>


  • If I'm not mistaken, tabs are such an interface element, where only 1 tab can be active (if you meant tabs). It turns out in the drop-down list, when you select one of the tabs, it is activated (and removed from the list) and then when you select another, does it return to the list? Or how? If so, then only 1 currently active tab should be written to the database? Or all that have ever been activated by the user? Or do you just use tabs as a list of active / non-active items? - Alex Nem
  • probably a little incorrectly described the situation .. there is a list of tabs, it is necessary that when you click on a specific one, it is displayed on the screen and it can be clicked (made active), and when clicked on the others, they are also displayed on the screen (but only become active when you click on something specific on the screen itself), and when you clicked on the "delete" button, they were removed from the screen and displayed again in the drop-down list - Kirill Bulgakov

1 answer 1

Solved the problem in this way (below). And the data in the database is transmitted in json format.

 $(document).on('click', '.tab_add', function() { var post = {}; post.ajaxRequest = true; if ($(this).data('metod') == 'country') { $('ul.ul__for_tabs').append('<li role="presentation" class="style_of_tabs" id="country"><a id="primeCountry" href="#baseWin2" aria-controls="baseWin2" role="tab" data-toggle="tab" data-name="searchCountry">База стран</a><button class="delite_tabs" data-metod="country"></button></li>'); post.country = 1; } if ($(this).data('metod') == 'currenci') { $('ul.ul__for_tabs').append('<li role="presentation" class="style_of_tabs" id="currenci"><a id="primeCurrencies" href="#baseWin3" aria-controls="baseWin3" role="tab" data-toggle="tab" data-name ="searchCurrenci">База валют</a><button class="delite_tabs" data-metod="currenci"></button></li>'); post.currenci = 1; } if ($(this).data('metod') == 'package') { $('ul.ul__for_tabs').append('<li role="presentation" class="style_of_tabs" id="package"><a href="#baseWin4" aria-controls="baseWin4" role="tab" data-toggle="tab" data-name="searchPackage">База пакетов</a><button class="delite_tabs" data-metod="package"></button></li>'); post.package = 1; } if ($(this).data('metod') == 'activitidirection') { $('ul.ul__for_tabs').append('<li role="presentation" class="style_of_tabs" id="activitidirection"><a href="#baseWin5" aria-controls="baseWin5" role="tab" data-toggle="tab" data-name="searchActivitiDirection">Направление деят-ти</a><button class="delite_tabs" data-metod="activitidirection"></button></li>'); post.activitidirection = 1; } if ($(this).data('metod') == 'branch') { $('ul.ul__for_tabs').append('<li role="presentation" class="style_of_tabs" id="branch"><a href="#baseWin6" aria-controls="baseWin6" role="tab" data-toggle="tab" data-name="searchMonitoringBranch">Отрасль</a><button class="delite_tabs" data-metod="branch"></button></li>'); post.branch = 1; } if ($(this).data('metod') == 'industrialdirection') { $('ul.ul__for_tabs').append('<li role="presentation" class="style_of_tabs" id="industrialdirection"><a href="#baseWin7" aria-controls="baseWin7" role="tab" data-toggle="tab" data-name="searchIndustrialDirection">Промышленное направление</a><button class="delite_tabs" data-metod="industrialdirection"></button></li>'); post.industrialdirection = 1; } if ($(this).data('metod') == 'measuri') { $('ul.ul__for_tabs').append('<li role="presentation" class="style_of_tabs" id="measuri"><a href="#baseWin8" aria-controls="baseWin8" role="tab" data-toggle="tab" data-name="searchMeasuri">Ед. Измерения</a><button class="delite_tabs" data-metod="measuri"></button></li>'); post.measuri = 1; } if ($(this).data('metod') == 'fo') { $('ul.ul__for_tabs').append('<li role="presentation" class="style_of_tabs" id="fo"><a href="#baseWin9" aria-controls="baseWin9" role="tab" data-toggle="tab" data-name="searchFo">Федеральный округ</a><button class="delite_tabs" data-metod="fo"></button></li>'); post.fo = 1; } if ($(this).data('metod') == 'region') { $('ul.ul__for_tabs').append('<li role="presentation" class="style_of_tabs" id="region"><a href="#baseWin10" aria-controls="baseWin10" role="tab" data-toggle="tab" data-name="searchRegion">Регион</a><button class="delite_tabs" data-metod="region"></button></li>'); post.region = 1; } if ($(this).data('metod') == 'logistic') { $('ul.ul__for_tabs').append('<li role="presentation" class="style_of_tabs" id="logistic"><a href="#baseWin11" aria-controls="baseWin11" role="tab" data-toggle="tab" data-name="searchLogistic">Логистика</a><button class="delite_tabs" data-metod="logistic"></button></li>'); post.logistic = 1; } if ($(this).data('metod') == 'quality') { $('ul.ul__for_tabs').append('<li role="presentation" class="style_of_tabs" id="quality"><a href="#baseWin12" aria-controls="baseWin12" role="tab" data-toggle="tab" data-name="searchQualityMeasure">Качество</a><button class="delite_tabs" data-metod="quality"></button></li>'); post.quality = 1; } $(this).remove(); console.log(post); }); $(document).on('click', '.delite_tabs', function() { var post = {}; post.ajaxRequest = true; $(this).parents('li').remove(); if ($(this).data('metod') == 'country') { $('ul.infobase_drop').append('<li class="hover_li tab_add" data-metod="country">База стран</li>'); post.country = 0; } if ($(this).data('metod') == 'currenci') { $('ul.infobase_drop').append('<li class="hover_li tab_add" data-metod="currenci">База валют</li>'); post.currenci = 0; } if ($(this).data('metod') == 'package') { $('ul.infobase_drop').append('<li class="hover_li tab_add" data-metod="package">База пакетов</li>'); post.package = 0; } if ($(this).data('metod') == 'activitidirection') { $('ul.infobase_drop').append('<li class="hover_li tab_add" data-metod="activitidirection">Направление деят-ти</li>'); post.activitidirection = 0; } if ($(this).data('metod') == 'branch') { $('ul.infobase_drop').append('<li class="hover_li tab_add" data-metod="branch">Отрасль</li>'); post.branch = 0; } if ($(this).data('metod') == 'industrialdirection') { $('ul.infobase_drop').append('<li class="hover_li tab_add" data-metod="industrialdirection">Промышленное направление</li>'); post.industrialdirection = 0; } if ($(this).data('metod') == 'measuri') { $('ul.infobase_drop').append('<li class="hover_li tab_add" data-metod="measuri">Ед. Измерения</li>'); post.measuri = 0; } if ($(this).data('metod') == 'fo') { $('ul.infobase_drop').append('<li class="hover_li tab_add" data-metod="fo">Федеральный округ</li>'); post.fo = 0; } if ($(this).data('metod') == 'region') { $('ul.infobase_drop').append('<li class="hover_li tab_add" data-metod="region">Регион</li>'); post.region = 0; } if ($(this).data('metod') == 'logistic') { $('ul.infobase_drop').append('<li class="hover_li tab_add" data-metod="logistic">Логистика</li>'); post.logistic = 0; } if ($(this).data('metod') == 'quality') { $('ul.infobase_drop').append('<li class="hover_li tab_add" data-metod="quality">Качество</li>'); post.quality = 0; } // row.find('.tab_add').text(post.r_name); console.log(post); });