JQ 메뉴 절환 선택을 달성

탐색 메뉴를 클릭 스위칭 상태를 선택

효과 :

아이디어 : 첫 번째 정규 판사가 다음 선택한 URL을 얻고,하면 해당 속성과 똑같이, 동일는 해당 자산의 제거에 동일하지 않습니다.

HTML 코드

< DIV 클래스 = "layui 컨테이너" 스타일 = "여백 : 0 픽셀, 여백 - 상단 : 70 픽셀;" > 
    < DIV 클래스 = "layui 행 바닥 글-탐색" > 
        < DIV 클래스 = "layui-COL-XS2 layui-COL-SM2 항목" > 
            < HREF = "{: 홈페이지 ( '/ 지수 / 인덱스 / 색인') } " > < IMG SRC ="/ 공공 / 인덱스 / 이미지 / 아이콘 / home.png " > < DIV >首页</ DIV > </ > </ DIV >
                
                
            
        
        = "layui-COL-XS2의 layui-COL-SM2 항목" > 
            < HREF = "{: 홈페이지 ( '/ 지수 / 색인 / 비디오')}" > < IMG SRC = "/ 공공 / 인덱스 / 이미지 / 아이콘 / video.png " > < DIV >视频</ DIV > </ > </ DIV > < DIV 클래스 ="layui-COL-XS2의 layui-COL-SM2 항목 " > < HREF ="{: 홈페이지 ( '/ 인덱스 / 색인 / 음악 ')} " > < IMG SRC ="/ 공공 / 인덱스 / 이미지 / 아이콘 / 음악.PNG " > < DIV > 음악
                
                
            
        
        
            
                
                </ DIV > 
            </ > </ DIV > < DIV 클래스 = "layui-COL-XS2 layui-COL-SM2 항목" > < HREF = "{: 홈페이지 ( '/ 지수 / 색인 / 뉴스')}" > < IMG SRC = "/ 공공 / 인덱스 / 이미지 / 아이콘 / new.png" > < DIV >动态</ DIV > </ > </ DIV > < DIV 클래스 = "layui-COL-XS2의 layui-col- SM2 항목 " > <HREF = "{: 홈페이지 ( '/ 지수 / 색인 / 약')}"
        
        
            
                
                
            
        
        
            > 
                < IMG SRC = "/ 공공 / 인덱스 / 이미지 / 아이콘 / about.png" > 
                < DIV >关于</ DIV > 
            </ > </ DIV > </ DIV > </ DIV > < 스타일 유형 = "텍스트 / CSS " > 
    .active는 { 
        색상 : 빨간색
     } </ 스타일 >

JQ 코드

<스크립트 유형 = "텍스트 / 자바 스크립트">
     var에 URL = 같이 location.href; 
    $ ( '.item> A') 각각 (. 함수 () { 
        특허 = 새로운 정규식 ( '/ 색인 / 색인 / 인덱스 " )
         경우 (pat.test (URL)) { 
            $ ( '.item> A ') .EQ (0) .addClass ( '활성' ); 
            $ ( . '.item> A> IMG') EQ (0) .attr ( "SRC", "/ 공공 / 인덱스 / 이미지 / 아이콘 / home_selected.png" ); 
        } 
        팻 = 새 정규식 ( '/ 지수 / 색인 / 비디오' );
         경우 (팻.'.item> A'를) 당량 (0) .removeClass ( '활성'. ); 
            $ ( . '.item> A'를) 당량 (1) .addClass ( '활성' ); 
            $ ( . '.item> A> IMG') EQ (1) .attr ( "SRC", "/ 공공 / 인덱스 / 이미지 / 아이콘 / video_selected.png" ); 
        } 
        특허 = 새로운 정규식 ( '/ 색인 / 색인 / 뮤직' );
        경우 (pat.test (URL)) { 
            $ ( '.item> A') 당량 (1) .removeClass ( '활성'. ); 
            $ ( . '.item> A'를) 당량 (2) .addClass ( '활성' ); 
            $ ( '.item> A> IMG'). EQ (2) .attr ( "SRC", "새로운 정규식 ( '/ 지수 / 색인 / 뉴스' );
        경우 (pat.test (URL)) { 
            $ ( '.item> A') EQ (2) .removeClass ( '활성'. ); 
            $ ( . '.item> A'를) 당량 (3) .addClass ( '활성' ); 
            $ ( . '.item> A> IMG') EQ (3) .attr ( "SRC", "/ 공공 / 인덱스 / 이미지 / 아이콘 / new_selected.png" ); 
        } 
        특허 = 새로운 정규식 ( '/ 색인 / 색인 / 정보' );
        경우 (pat.test (URL)) { 
            $ ( '.item> A') EQ (3) .removeClass ( '활성'. ); 
            $ ( '.item> A'). EQ (4). addClass ( '활성' ); 
            $ (. '.item> A> IMG') 당량 (4) .attr ( "SRC", "/ 공개 / 색인 / 이미지 / 아이콘 / about_selected.png" ); 
        } 
    }); 
</ script>

JQ 메뉴 절환 선택을 달성

추천