how to count click tab menu and insert to database

admin管理员组

文章数量:1320864

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

Share Improve this question edited Nov 3, 2020 at 12:13 fuxia♦ 107k3838 gold badges255255 silver badges459459 bronze badges asked Nov 3, 2020 at 9:45 SinaparsSinapars 122 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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)

本文标签： how to count click tab menu and insert to database