jqueryは疑似クラススタイル、非表示と表示、ループの書き込み、クリックイベントなどのイベントメソッドをプロジェクトに書き込みます

今までjqを書いたことがなかったので、業界に入ってから初めて書いたのでメモしておきます 書き方によってはネイティブjsやvueに近いものもありますが、やはり違う部分もあります。 

1. 疑似クラススタイルを作成する

//アニメーション态样式
$(obj).addClass('qh').siblings().removeClass('qh'); 
 .qh {
        カラー: #0099FF !重要; 
    .qh 
    ::before {
    表示: インラインブロック !重要; 
    コンテンツ： ""; 
    位置: 絶対; 
    マージントップ: 36px; 
    幅: 60ピクセル; 
    高さ: 6px; 
    背景色: #0099FF; 
    境界半径: 8px; 
    変換:translateX(28%) 
    }

2. クラスの表示と非表示を切り替える ID は #

関数 coursewitch(obj) { 
        $(obj).addClass('qh').siblings().removeClass('qh'); 
        var インデックス = $(obj).index(); 
        $('.directory_details').empty(); 
        if (インデックス == 0) {
            導入(); 
            //表示と隐藏クラスです。id是# 
            $(".imgOne").show(); 
            $(".imgTwo").hide(); 
        } else {
            コース(); 
            $(".imgOne").hide(); 
            $(".imgTwo").show(); 
        } 
    }

3.指定した位置までスクロールします

   <div class="航空" style="幅: 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ループと動的色の変更

html：
<div class="box-tab" id="tabbut"></div> 
js
: 
//底部タブ点击
        function tabList() { 
            var list = [ 
                { title: 'Jmis Cloud' }, 
                { title: '高速 BI' }, 
                { title: 'Smart SCADA' }, 
                { title: 'Smart GIS' }, 
                { title: 'Smart Sim' }, 
            ] 
            var str = '' 
            list.map((item) => { 
                str += `<div class="tab"> 
                    ${item.title} 
                    </div>` 
            })box-tab div:first').addClass("active") 
        } 
            $('.ボックスタブ').append(str)
            $('.box-tab div:first').addClass("active") 
        
        //底部タブ点击
        function tabList() { 
            var list = [ 
                { title: 'Jmis Cloud' }, 
                { title: 'Fast BI' } , 
                { title: 'スマート SCADA' }, 
                { title: 'スマート GIS' }, 
                { title: 'スマート シム' }, 
            ] 
            var str = '' 
            list.map((item) => { 
                str += `<div class="tab"> 
                    ${item.title} 
                    </div>` 
            }) 
            $('.box-tab')。append(str) 
            $('.box-tab div:first').addClass("active") 
        } 
        //点击变色
        $(document)。on("クリック", ".tab", function () { 
            (this).addClass("active",).siblings().removeClass("active",) 
        }) 
        
css: 
        .box-tab { 
        width: 100%; 
        マージン: 0 自動; 
        ディスプレイ: フレックス; 
        コンテンツの位置揃え: 中央; 
        フォントサイズ: 22px; 
        色: #797979; 
        カーソル: ポインタ; 
    }
 
.tab
    {
        マージン: 0px 40px; 
        ディスプレイ: フレックス; 
        フレックス方向: 列; 
        コンテンツの位置揃え: 中央; 
        フォントサイズ: 16px; 
        パディング: 4px 12px; 
        境界半径: 4px; 
}
    
    .active {
        背景: #0099FF; 
        color: #fff; 
    }
 
    .active::before { 
        /* 表示: インラインブロック !重要; 
    コンテンツ： ""; 
    位置: 絶対; 
    マージントップ: 52px; 
    幅: 40ピクセル; 
    高さ: 3px; 
    背景色: #0099FF; 
    境界半径: 6px; */ 
    /* 変換:translateX(9%); */ 
        }
        

5.IDを取得する

    //底部タブ点击
            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 = $(これ）。data('id'); 
            // クリックイベントの処理ロジックを実行
            ContentThreeApi(id) 
        })

6. リンク後、href の後ろに渡されたパラメータをインターセプトします。

    $(document).ready(function () { 
            let places = window.location.href.split('id=')//ジャンプするためにクリックしたリンクを取得し、そのリンクを href でマークしました。インターセプトには Split を使用すると便利です。インターセプトは配列です
            locatId = location[1] ? places[1] : '1559345112043532290'//必要なデータを配列で取得して
            list() 
            textApi() 
        })

やっと

読んでいただきありがとうございます。不備がございましたら、お気軽にコメント欄でご相談ください。