I have a tab menu with the following structure, clicking on which will add an active class to the li element Now I need to count the number of clicks of each tab separately and more importantly save (insert) it in the database Please help with an example how can I implement it?
<div class="tabs-shortcode tabs-wrapper container-wrapper tabs-vertical">
<ul class="tabs">
<li class="active">
<a href="#tab-content-1"><img src="2019/08/medal.png" alt=""> Tab One</a>
</li>
<li class="">
<a href="#tab-content-2"><img src="2020/07/maths.png" alt=""> Tab Two</a>
</li>
<li class="">
<a href="#tab-content-3"><img src="2020/07/loan.png" alt="">Tab Three</a>
</li>
</ul>
<div class="tab-content is-not-active" id="tab-content-1" style="min-height: 1311px; display: block;">
<div class="tab-content-wrap tie-animate-slideInUp">Content is Here</div>
</div>
<div class="tab-content is-not-active" id="tab-content-2" style="min-height: 1311px; display: none;">
<div class="tab-content-wrap tie-animate-slideInUp">Content is Here</div>
</div>
<div class="tab-content is-not-active" id="tab-content-3" style="min-height: 1311px; display: none;">
<div class="tab-content-wrap tie-animate-slideInUp">Content is Here</div>
</div>
</div>
BR
I have a tab menu with the following structure, clicking on which will add an active class to the li element Now I need to count the number of clicks of each tab separately and more importantly save (insert) it in the database Please help with an example how can I implement it?
<div class="tabs-shortcode tabs-wrapper container-wrapper tabs-vertical">
<ul class="tabs">
<li class="active">
<a href="#tab-content-1"><img src="2019/08/medal.png" alt=""> Tab One</a>
</li>
<li class="">
<a href="#tab-content-2"><img src="2020/07/maths.png" alt=""> Tab Two</a>
</li>
<li class="">
<a href="#tab-content-3"><img src="2020/07/loan.png" alt="">Tab Three</a>
</li>
</ul>
<div class="tab-content is-not-active" id="tab-content-1" style="min-height: 1311px; display: block;">
<div class="tab-content-wrap tie-animate-slideInUp">Content is Here</div>
</div>
<div class="tab-content is-not-active" id="tab-content-2" style="min-height: 1311px; display: none;">
<div class="tab-content-wrap tie-animate-slideInUp">Content is Here</div>
</div>
<div class="tab-content is-not-active" id="tab-content-3" style="min-height: 1311px; display: none;">
<div class="tab-content-wrap tie-animate-slideInUp">Content is Here</div>
</div>
</div>
BR
Share Improve this question edited Nov 3, 2020 at 12:13 fuxia♦ 107k38 gold badges255 silver badges459 bronze badges asked Nov 3, 2020 at 9:45 SinaparsSinapars 12 bronze badges1 Answer
Reset to default 1You can do it with AJAX - for each .tab-content, send via AJAX the ID (for example #tab-content-3). Now on the server receive the id and have a table of ids and add 1 each time.
Here you can find and update increment command - make sure to use something like this and not reading from DB and then updating, because this is not atomic and other users can "update" your tab count in between: https://stackoverflow/questions/2259155/increment-value-in-mysql-update-query
A better approach though would be using Google Analytics. Assign an even to the tabs, and then you can view it all in GA - better than reinventing the wheel I guess (only if you don't need the info back on the website, but just to have statistical information of course)