How to control the display mode of part of the content in the web page through buttons

at present, three display modes have been designed, style-grid, style-grid-2 and style-list-1, have been implemented statically, that is, the < section class= "video-listing style-list-1" > has been changed, but how to switch dynamically through js has not been adjusted well. I hope the master can give me advice. The website is developed using django. The related code is as follows: 

                <section class="video-listing style-list-1">
                    <div class="video-listing-head">
                        <h2 class="light-title" style="color:-sharp000; margin-bottom:20px;"></h2>
                        <div class="video-listing-filter">
                            <ul id="myTab" class="nav nav-tabs">
                                <li class="active">
                                    <a href="-sharpnew" data-toggle="tab"></a>
                                </li>
                                <li>
                                    <a href="-sharpview" data-toggle="tab"></a>
                                </li>
                                <li>
                                    <a href="-sharpcomment" data-toggle="tab"></a>
                                </li>
                                <li>
                                    <a href="-sharpdownload" data-toggle="tab"></a>
                                </li>
                                <div class="pull-right style-filter hidden-xs">
                                    <a data-style="style-grid" class=""><i class="fa fa-th"></i></a>
                                    <a data-style="style-grid-2" class="" ><i class="fa fa-th-large"></i></a>
                                    <a data-style="style-list-1" class="current"><i class="fa fa-th-list"></i></a>
                                </div>
                            </ul>
                        </div>
Django html
Aug.03,2021 
var styleone = document.querySelectorAll('.pull-right a')[0]
var styletwo = document.querySelectorAll('.pull-right a')[1]
var stylethree = document.querySelectorAll('.pull-right a')[2]
var section = document.querySelector('.video-listing')

styleone.onclick = function(e) {
  section.classList.remove('style-grid-2 style-list-1');
  section.classList.add('style-grid');
};
styletwo.onclick = function(e) {
  section.classList.remove('style-grid style-list-1');
  section.classList.add('style-grid-2');
};
stylethree.onclick = function(e) {
  section.classList.remove('style-grid style-grid-2');
  section.classList.add('style-list-1');
};

pay attention to browser compatibility with classList

Previous: Iview's DatePicker sets the font size of placeholder

Next: The problem of Segmentation Line of svg

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e437a1-44a47.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e437a1-44a47.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?