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

• database
• count

1 Answer 1

You 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)