var annie = document.queryselectorall(".anniu");
var annie_p = document.queryselectorall(".anniu_p");

var block1 = document.queryselector(".equipment_content_frame0");

var block2 = document.queryselector(".equipment_content1_frame");
var block3 = document.queryselector(".equipment_content2_frame ");

var block1_p = document.queryselector(".equipment_content_p_frame0");
var block2_p = document.queryselector(".equipment_content1_p_frame");
var block3_p = document.queryselector(".equipment_content2_p_frame");



//分页
var frame0_img1=document.queryselector(".equipment_frame0_img1");
var frame0_img2=document.queryselector(".equipment_frame0_img2");
var frame0_img3=document.queryselector(".equipment_frame0_img3");
var frame0_img4=document.queryselector(".equipment_frame0_img4");

var equipment_serfyn=document.queryselectorall(".equipment_serfyn0");


var frame1_img1=document.queryselector(".equipment_frame1_img1");
var frame1_img2=document.queryselector(".equipment_frame1_img2");
var frame1_img3=document.queryselector(".equipment_frame1_img3");
var frame1_img4=document.queryselector(".equipment_frame1_img4");
var frame1_img5=document.queryselector(".equipment_frame1_img5");
var frame1_img6=document.queryselector(".equipment_frame1_img6");
var frame1_img7=document.queryselector(".equipment_frame1_img7");
var equipment_serfyn1=document.queryselectorall(".equipment_serfyn1");


var frame0_img1_p=document.queryselector(".equipment_frame0_img1_p");
var frame0_img2_p=document.queryselector(".equipment_frame0_img2_p");
var frame0_img3_p=document.queryselector(".equipment_frame0_img3_p");
var frame0_img4_p=document.queryselector(".equipment_frame0_img4_p");

var equipment_serfyn_p=document.queryselectorall(".equipment_serfyn0_p");


var frame1_img1_p=document.queryselector(".equipment_frame1_img1_p");
var frame1_img2_p=document.queryselector(".equipment_frame1_img2_p");
var frame1_img3_p=document.queryselector(".equipment_frame1_img3_p");
var frame1_img4_p=document.queryselector(".equipment_frame1_img4_p");
var frame1_img5_p=document.queryselector(".equipment_frame1_img5_p");
var frame1_img6_p=document.queryselector(".equipment_frame1_img6_p");
var frame1_img7_p=document.queryselector(".equipment_frame1_img7_p");
var equipment_serfyn1_p=document.queryselectorall(".equipment_serfyn1_p");


if (window.innerwidth > 768) {
    annie[0].addeventlistener("click", (e) => {
        annie[0].style.color = "white";
        annie[0].style.backgroundcolor = "rgb(68, 82, 169)";
        frame0_img1.style.display = "block";
        frame0_img2.style.display = "none";
        block1.style.display = "block"
        block2.style.display = "none";
        block3.style.display = "none";
        for (var j = 0; j < 3; j++) {
             if(j != 0){

                 annie[j].style.color = "black";
                 annie[j].style.backgroundcolor = "white";
             }
         }
     });
     annie[1].addeventlistener("click", (e) => {
        annie[1].style.color = "white";
        annie[1].style.backgroundcolor = "rgb(68, 82, 169)";
        block1.style.display = "none"
        block2.style.display = "block";
        block3.style.display = "none";
        for (var j = 0; j < 3; j++) {
             if(j != 1){
                 annie[j].style.color = "black";
                 annie[j].style.backgroundcolor = "white";
             }
         }
     });
     annie[2].addeventlistener("click", (e) => {
        annie[2].style.color = "white";
        annie[2].style.backgroundcolor = "rgb(68, 82, 169)";
        block1.style.display = "none"
        block2.style.display = "none";
        block3.style.display = "block";
        for (var j = 0; j < 2; j++) {
             if(j != 2){
                 annie[j].style.color = "black";
                 annie[j].style.backgroundcolor = "white";
             }
         }
     });
     equipment_serfyn[0].addeventlistener("click", (e) => {
        equipment_serfyn[0].style.color = "white";
        equipment_serfyn[0].style.backgroundcolor = "rgb(68, 82, 169)";
        frame0_img1.style.display = "block";
        frame0_img2.style.display = "none";
        frame0_img3.style.display = "none";
        frame0_img4.style.display = "none";
        for (var j = 0; j < 4; j++) {
             if(j != 0){
                 equipment_serfyn[j].style.color = "black";
                 equipment_serfyn[j].style.backgroundcolor = "white";
             }
         }
     });
     equipment_serfyn[1].addeventlistener("click", (e) => {
        equipment_serfyn[1].style.color = "white";
        equipment_serfyn[1].style.backgroundcolor = "rgb(68, 82, 169)";
        frame0_img1.style.display = "none";
        frame0_img2.style.display = "block";
        frame0_img3.style.display = "none";
        frame0_img4.style.display = "none";
        for (var j = 0; j < 4; j++) {
             if(j != 1){
                 equipment_serfyn[j].style.color = "black";
                 equipment_serfyn[j].style.backgroundcolor = "white";
             }
         }
     });


     equipment_serfyn[2].addeventlistener("click", (e) => {
        equipment_serfyn[2].style.color = "white";
        equipment_serfyn[2].style.backgroundcolor = "rgb(68, 82, 169)";
        frame0_img1.style.display = "none";
        frame0_img2.style.display = "none";
        frame0_img3.style.display = "block";
        frame0_img4.style.display = "none";
        for (var j = 0; j < 4; j++) {
             if(j != 2){
                 equipment_serfyn[j].style.color = "black";
                 equipment_serfyn[j].style.backgroundcolor = "white";
             }
         }
     });
     equipment_serfyn[3].addeventlistener("click", (e) => {
        equipment_serfyn[3].style.color = "white";
        equipment_serfyn[3].style.backgroundcolor = "rgb(68, 82, 169)";
        frame0_img1.style.display = "none";
        frame0_img2.style.display = "none";
        frame0_img3.style.display = "none";
        frame0_img4.style.display = "block";
        for (var j = 0; j < 4; j++) {
             if(j != 3){
                 equipment_serfyn[j].style.color = "black";
                 equipment_serfyn[j].style.backgroundcolor = "white";
             }
         }
     });
     equipment_serfyn1[0].addeventlistener("click", (e) => {
        equipment_serfyn1[0].style.color = "white";
        equipment_serfyn1[0].style.backgroundcolor = "rgb(68, 82, 169)";
        frame1_img1.style.display = "block";
        frame1_img2.style.display = "none";
        frame1_img3.style.display = "none";
        frame1_img4.style.display = "none";
        frame1_img5.style.display = "none";
        frame1_img6.style.display = "none";
        frame1_img7.style.display = "none";
        for (var j = 0; j < 7; j++) {
             if(j != 0){
                 equipment_serfyn1[j].style.color = "black";
                 equipment_serfyn1[j].style.backgroundcolor = "white";
             }
         }
     });

     equipment_serfyn1[1].addeventlistener("click", (e) => {
        equipment_serfyn1[1].style.color = "white";
        equipment_serfyn1[1].style.backgroundcolor = "rgb(68, 82, 169)";
        frame1_img1.style.display = "none";
        frame1_img2.style.display = "block";
        frame1_img3.style.display = "none";
        frame1_img4.style.display = "none";
        frame1_img5.style.display = "none";
        frame1_img6.style.display = "none";
        frame1_img7.style.display = "none";
        for (var j = 0; j < 7; j++) {
             if(j != 1){
                 equipment_serfyn1[j].style.color = "black";
                 equipment_serfyn1[j].style.backgroundcolor = "white";
             }
         }
     });

     equipment_serfyn1[2].addeventlistener("click", (e) => {
        equipment_serfyn1[2].style.color = "white";
        equipment_serfyn1[2].style.backgroundcolor = "rgb(68, 82, 169)";
        frame1_img1.style.display = "none";
        frame1_img2.style.display = "none";
        frame1_img3.style.display = "block";
        frame1_img4.style.display = "none";
        frame1_img5.style.display = "none";
        frame1_img6.style.display = "none";
        frame1_img7.style.display = "none";
        for (var j = 0; j < 7; j++) {
             if(j != 2){
                 equipment_serfyn1[j].style.color = "black";
                 equipment_serfyn1[j].style.backgroundcolor = "white";
             }
         }
     });

     equipment_serfyn1[3].addeventlistener("click", (e) => {
        equipment_serfyn1[3].style.color = "white";
        equipment_serfyn1[3].style.backgroundcolor = "rgb(68, 82, 169)";
        frame1_img1.style.display = "none";
        frame1_img2.style.display = "none";
        frame1_img3.style.display = "none";
        frame1_img4.style.display = "block";
        frame1_img5.style.display = "none";
        frame1_img6.style.display = "none";
        frame1_img7.style.display = "none";
        for (var j = 0; j < 7; j++) {
             if(j != 3){
                 equipment_serfyn1[j].style.color = "black";
                 equipment_serfyn1[j].style.backgroundcolor = "white";
             }
         }
     });

     equipment_serfyn1[4].addeventlistener("click", (e) => {
        equipment_serfyn1[4].style.color = "white";
        equipment_serfyn1[4].style.backgroundcolor = "rgb(68, 82, 169)";
        frame1_img1.style.display = "none";
        frame1_img2.style.display = "none";
        frame1_img3.style.display = "none";
        frame1_img4.style.display = "none";
        frame1_img5.style.display = "block";
        frame1_img6.style.display = "none";
        frame1_img7.style.display = "none";
        for (var j = 0; j < 7; j++) {
             if(j != 4){
                 equipment_serfyn1[j].style.color = "black";
                 equipment_serfyn1[j].style.backgroundcolor = "white";
             }
         }
     });

     equipment_serfyn1[5].addeventlistener("click", (e) => {
        equipment_serfyn1[5].style.color = "white";
        equipment_serfyn1[5].style.backgroundcolor = "rgb(68, 82, 169)";
        frame1_img1.style.display = "none";
        frame1_img2.style.display = "none";
        frame1_img3.style.display = "none";
        frame1_img4.style.display = "none";
        frame1_img5.style.display = "none";
        frame1_img6.style.display = "block";
        frame1_img7.style.display = "none";
        for (var j = 0; j < 7; j++) {
             if(j != 5){
                 equipment_serfyn1[j].style.color = "black";
                 equipment_serfyn1[j].style.backgroundcolor = "white";
             }
         }
     });
 
     equipment_serfyn1[6].addeventlistener("click", (e) => {
        equipment_serfyn1[6].style.color = "white";
        equipment_serfyn1[6].style.backgroundcolor = "rgb(68, 82, 169)";
        frame1_img1.style.display = "none";
        frame1_img2.style.display = "none";
        frame1_img3.style.display = "none";
        frame1_img4.style.display = "none";
        frame1_img5.style.display = "none";
        frame1_img6.style.display = "none";
        frame1_img7.style.display = "block";
        for (var j = 0; j < 7; j++) {
             if(j != 6){
                 equipment_serfyn1[j].style.color = "black";
                 equipment_serfyn1[j].style.backgroundcolor = "white";
             }
         }
     });
 


}
else{
    annie_p[0].addeventlistener("click", (e) => {
        annie_p[0].style.color = "white";
        annie_p[0].style.backgroundcolor = "rgb(68, 82, 169)";
        block1_p.style.display = "block";
        block2_p.style.display = "none";
        block3_p.style.display = "none";
        for (var j = 0; j < 3; j++) {
             if(j != 0){
                 annie_p[j].style.color = "black";
                 annie_p[j].style.backgroundcolor = "white";
             }
         }
     });
     annie_p[1].addeventlistener("click", (e) => {
        annie_p[1].style.color = "white";
        annie_p[1].style.backgroundcolor = "rgb(68, 82, 169)";
        block1_p.style.display = "none"
        block2_p.style.display = "block";
        block3_p.style.display = "none";
        for (var j = 0; j < 3; j++) {
             if(j != 1){
                 annie_p[j].style.color = "black";
                 annie_p[j].style.backgroundcolor = "white";
             }
         }
     });
     annie_p[2].addeventlistener("click", (e) => {
        annie_p[2].style.color = "white";
        annie_p[2].style.backgroundcolor = "rgb(68, 82, 169)";
        block1_p.style.display = "none"
        block2_p.style.display = "none";
        block3_p.style.display = "block";
        for (var j = 0; j < 3; j++) {
             if(j != 2){
                 annie_p[j].style.color = "black";
                 annie_p[j].style.backgroundcolor = "white";
             }
         }
     });
     equipment_serfyn_p[0].addeventlistener("click", (e) => {
       equipment_serfyn_p[0].style.color = "white";
       equipment_serfyn_p[0].style.backgroundcolor = "rgb(68, 82, 169)";
       frame0_img1_p.style.display = "block";
       frame0_img2_p.style.display = "none";
       frame0_img3_p.style.display = "none";
       frame0_img4_p.style.display = "none";
        for (var j = 0; j < 4; j++) {
             if(j != 0){
                equipment_serfyn_p[j].style.color = "black";
                equipment_serfyn_p[j].style.backgroundcolor = "white";
             }
         }
     });
     equipment_serfyn_p[1].addeventlistener("click", (e) => {
        equipment_serfyn_p[1].style.color = "white";
        equipment_serfyn_p[1].style.backgroundcolor = "rgb(68, 82, 169)";
        frame0_img1_p.style.display = "none";
        frame0_img2_p.style.display = "block";
        frame0_img3_p.style.display = "none";
        frame0_img4_p.style.display = "none";
         for (var j = 0; j < 4; j++) {
              if(j != 1){
                 equipment_serfyn_p[j].style.color = "black";
                 equipment_serfyn_p[j].style.backgroundcolor = "white";
              }
          }
      });
      
      equipment_serfyn_p[2].addeventlistener("click", (e) => {
        equipment_serfyn_p[2].style.color = "white";
        equipment_serfyn_p[2].style.backgroundcolor = "rgb(68, 82, 169)";
        frame0_img1_p.style.display = "none";
        frame0_img2_p.style.display = "none";
        frame0_img3_p.style.display = "block";
        frame0_img4_p.style.display = "none";
         for (var j = 0; j < 4; j++) {
              if(j != 2){
                 equipment_serfyn_p[j].style.color = "black";
                 equipment_serfyn_p[j].style.backgroundcolor = "white";
              }
          }
      });

      equipment_serfyn_p[3].addeventlistener("click", (e) => {
        equipment_serfyn_p[3].style.color = "white";
        equipment_serfyn_p[3].style.backgroundcolor = "rgb(68, 82, 169)";
        frame0_img1_p.style.display = "none";
        frame0_img2_p.style.display = "none";
        frame0_img3_p.style.display = "none";
        frame0_img4_p.style.display = "block";
         for (var j = 0; j < 4; j++) {
              if(j != 3){
                 equipment_serfyn_p[j].style.color = "black";
                 equipment_serfyn_p[j].style.backgroundcolor = "white";
              }
          }
      });





      equipment_serfyn1_p[0].addeventlistener("click", (e) => {
        equipment_serfyn1_p[0].style.color = "white";
        equipment_serfyn1_p[0].style.backgroundcolor = "rgb(68, 82, 169)";
        frame1_img1_p.style.display = "block";
        frame1_img2_p.style.display = "none";
        frame1_img3_p.style.display = "none";
        frame1_img4_p.style.display = "none";
        frame1_img5_p.style.display = "none";
        frame1_img6_p.style.display = "none";
        frame1_img7_p.style.display = "none";
        for (var j = 0; j < 7; j++) {
             if(j != 0){
                 equipment_serfyn1_p[j].style.color = "black";
                 equipment_serfyn1_p[j].style.backgroundcolor = "white";
             }
         }
     });
 
     equipment_serfyn1_p[1].addeventlistener("click", (e) => {
        equipment_serfyn1_p[1].style.color = "white";
        equipment_serfyn1_p[1].style.backgroundcolor = "rgb(68, 82, 169)";
        frame1_img1_p.style.display = "none";
        frame1_img2_p.style.display = "block";
        frame1_img3_p.style.display = "none";
        frame1_img4_p.style.display = "none";
        frame1_img5_p.style.display = "none";
        frame1_img6_p.style.display = "none";
        frame1_img7_p.style.display = "none";
        for (var j = 0; j < 7; j++) {
             if(j != 1){
                 equipment_serfyn1_p[j].style.color = "black";
                 equipment_serfyn1_p[j].style.backgroundcolor = "white";
             }
         }
     });
      equipment_serfyn1_p[2].addeventlistener("click", (e) => {
        equipment_serfyn1_p[2].style.color = "white";
        equipment_serfyn1_p[2].style.backgroundcolor = "rgb(68, 82, 169)";
        frame1_img1_p.style.display = "none";
        frame1_img2_p.style.display = "none";
        frame1_img3_p.style.display = "block";
        frame1_img4_p.style.display = "none";
        frame1_img5_p.style.display = "none";
        frame1_img6_p.style.display = "none";
        frame1_img7_p.style.display = "none";
        for (var j = 0; j < 7; j++) {
             if(j != 2){
                 equipment_serfyn1_p[j].style.color = "black";
                 equipment_serfyn1_p[j].style.backgroundcolor = "white";
             }
         }
     });
     equipment_serfyn1_p[3].addeventlistener("click", (e) => {
        equipment_serfyn1_p[3].style.color = "white";
        equipment_serfyn1_p[3].style.backgroundcolor = "rgb(68, 82, 169)";
        frame1_img1_p.style.display = "none";
        frame1_img2_p.style.display = "none";
        frame1_img3_p.style.display = "none";
        frame1_img4_p.style.display = "block";
        frame1_img5_p.style.display = "none";
        frame1_img6_p.style.display = "none";
        frame1_img7_p.style.display = "none";
        for (var j = 0; j < 7; j++) {
             if(j != 3){
                 equipment_serfyn1_p[j].style.color = "black";
                 equipment_serfyn1_p[j].style.backgroundcolor = "white";
             }
         }
     });
     equipment_serfyn1_p[4].addeventlistener("click", (e) => {
        equipment_serfyn1_p[4].style.color = "white";
        equipment_serfyn1_p[4].style.backgroundcolor = "rgb(68, 82, 169)";
        frame1_img1_p.style.display = "none";
        frame1_img2_p.style.display = "none";
        frame1_img3_p.style.display = "none";
        frame1_img4_p.style.display = "none";
        frame1_img5_p.style.display = "block";
        frame1_img6_p.style.display = "none";
        frame1_img7_p.style.display = "none";
        for (var j = 0; j < 7; j++) {
             if(j != 4){
                 equipment_serfyn1_p[j].style.color = "black";
                 equipment_serfyn1_p[j].style.backgroundcolor = "white";
             }
         }
     });

     equipment_serfyn1_p[5].addeventlistener("click", (e) => {
        equipment_serfyn1_p[5].style.color = "white";
        equipment_serfyn1_p[5].style.backgroundcolor = "rgb(68, 82, 169)";
        frame1_img1_p.style.display = "none";
        frame1_img2_p.style.display = "none";
        frame1_img3_p.style.display = "none";
        frame1_img4_p.style.display = "none";
        frame1_img5_p.style.display = "none";
        frame1_img6_p.style.display = "block";
        frame1_img7_p.style.display = "none";
        for (var j = 0; j < 7; j++) {
             if(j != 5){
                 equipment_serfyn1_p[j].style.color = "black";
                 equipment_serfyn1_p[j].style.backgroundcolor = "white";
             }
         }
     });

     equipment_serfyn1_p[6].addeventlistener("click", (e) => {
        equipment_serfyn1_p[6].style.color = "white";
        equipment_serfyn1_p[6].style.backgroundcolor = "rgb(68, 82, 169)";
        frame1_img1_p.style.display = "none";
        frame1_img2_p.style.display = "none";
        frame1_img3_p.style.display = "none";
        frame1_img4_p.style.display = "none";
        frame1_img5_p.style.display = "none";
        frame1_img6_p.style.display = "none";
        frame1_img7_p.style.display = "block";
        for (var j = 0; j < 7; j++) {
             if(j != 6){
                 equipment_serfyn1_p[j].style.color = "black";
                 equipment_serfyn1_p[j].style.backgroundcolor = "white";
             }
         }
     });
}