jquery writes pseudo-class styles, hiding and showing, loop writing, click events, etc. event methods in projects

Because I have never written jq before, this is the first time I have written it since I entered the industry, so I took some notes. Some writing methods are closer to native js and vue, but there are still some differences. 

1. Write pseudo-class styles

//动态样式
$(obj).addClass('qh').siblings().removeClass('qh');
 .qh {
        color: #0099FF !important;
    } 
    .qh::before {
    display: inline-block !important;
    content: "";
    position: absolute;
    margin-top: 36px;
    width: 60px;
    height: 6px;
    background-color: #0099FF;
    border-radius: 8px;
    transform: translateX(28%)
    }

2. Hide and show class is. id is #

 function courseswitch(obj) {
        $(obj).addClass('qh').siblings().removeClass('qh');
        var index = $(obj).index();
        $('.directory_details').empty();
        if (index == 0) {
            introduce();
            //显示和隐藏 class是. id是#
            $(".imgOne").show();
            $(".imgTwo").hide();
        } else {
            course();
            $(".imgOne").hide();
            $(".imgTwo").show();
        }
    }

3.Scroll to the specified position

   <div class="aviation" style="width: 100%;" id="activeOne"></div>
   //滚动到指定位置
        function onEye(e) {
            if(e === 0) {
                var target = $("#activeOne");
            }
            if(e === 1){
                var target = $("#activeTwo");
            }
            if(e === 2 ){
                var target =$("#activeThree")
            }
            var offsetTop = target.offset().top;
                 $("html,body").animate({scrollTop:offsetTop}, 500);
        }

4.jq loop and dynamic color change

html：
<div class="box-tab" id="tabbut"></div>
​
js:
//底部tab点击
        function tabList() {
            var list = [
                { title: 'Jmis Cloud' },
                { title: 'Fast BI' },
                { title: 'Smart SCADA' },
                { title: 'Smart GIS' },
                { title: 'Smart Sim' },
            ]
            var str = ''
            list.map((item) => {
                str += `<div class="tab">
                    ${item.title}
                    </div>`
            })
            $('.box-tab').append(str)
            $('.box-tab div:first').addClass("active")
        }
        
        //底部tab点击
        function tabList() {
            var list = [
                { title: 'Jmis Cloud' },
                { title: 'Fast BI' },
                { title: 'Smart SCADA' },
                { title: 'Smart GIS' },
                { title: 'Smart Sim' },
            ]
            var str = ''
            list.map((item) => {
                str += `<div class="tab">
                    ${item.title}
                    </div>` 
            })
            $('.box-tab').append(str)
            $('.box-tab div:first').addClass("active")
        }
        //点击变色
        $(document).on("click", ".tab", function () {
            $(this).addClass("active",).siblings().removeClass("active",)
        })
        
css:
        .box-tab {
        width: 100%;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        font-size: 22px;
        color: #797979;
        cursor: pointer;
​
    }
​
    .tab {
        margin: 0px 40px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: 16px;
        padding: 4px 12px;
        border-radius: 4px;
    }
​
    .active {
        background: #0099FF;
        color: #fff;
​
    }
    .active::before {
        /* display: inline-block !important;
    content: "";
    position: absolute;
    margin-top: 52px;
    width: 40px;
    height: 3px;
    background-color: #0099FF;
    border-radius: 6px; */
    /* transform: translateX(9%); */
        }
        

5. Get id

    //底部tab点击
            function tabList(e) {
            var str = ''
            e.map((item) => {
                str += `<div class="tab" data-id="${item.id}">
                    ${item.name}
                    </div>`
            })
            $('.box-tab').append(str) 
            $('.box-tab div:first').addClass("active")
        }
        //点击变色
        $(document).on("click", ".tab", function () {
            $(this).addClass("active",).siblings().removeClass("active",)
            var id = $(this).data('id'); 
        })
            ContentThreeApi(id)
            // Execute the processing logic of click event

6. After linking, intercept the parameters passed behind href

    $(document).ready(function () { 
            let locations = window.location.href.split('id=')//Get the link we just clicked to jump to, and then I marked the link just now with href , it is convenient for us to use split to intercept. The interception is an array 
            locatId = locations[1] ? locations[1] : '1559345112043532290'//We get the data needed in the array to 
            list() 
            textApi() 
        })

at last

Thanks for reading. If you have any deficiencies, please feel free to discuss them in the comment area!