> 웹 프론트엔드 > JS 튜토리얼 > jquery 주소 표시줄 링크와 레이블 링크를 일치시키는 특수 효과

jquery 주소 표시줄 링크와 레이블 링크를 일치시키는 특수 효과

不言
풀어 주다: 2018-07-02 15:56:07
원래의
1620명이 탐색했습니다.

이 글은 주로 jquery 주소 표시줄 링크와 태그 링크를 일치시키는 특수 효과를 소개합니다. 이제 특정 참조 값이 있으므로 이를 참조할 수 있습니다.

jquery가 주소 표시줄 매개변수를 가져오고 변경하는 방법 주소 표시줄 스타일 다음은 이번 글을 통해 jquery 주소 표시줄 링크와 태그 링크 매칭을 위한 특수 효과 코드를 요약해서 공유해드리겠습니다. 필요하신 분들은 참고하시면 됩니다

제목에서 언급했듯이, 이런 기능이 나오면 링크를 클릭한 후 점프 후 링크 주소에 스타일을 추가하고 클래스를 현재로 추가하여 특별한 스타일을 추가합니다.

그림과 같이 HTML+css3을 클릭하여 점프한 후 다음과 같이 스타일을 추가합니다.

js 코드는 다음과 같습니다.

var currUrl = window.location.href;
   var currStyle = function (links){
     links.each(function(){
        var url = $(this).attr('href');
        if (currUrl.indexOf(url) != -1){
          $(this).addClass("current");
          return false;
        }
     });
}
로그인 후 복사

어떻게 호출하나요?

다음 jquery 호출 코드:

$(function(){
  currStyle($("#sidebar .list a"));
})
로그인 후 복사

이것은 그림과 같은 기능을 수행합니다.

javascript 및 jquery는 태그의 href 속성을 수정합니다

javascript 코드는 다음과 같습니다.

document.getElementById("myId").setAttribute("href","www.xxx.com"); 
document.getElementById("myId").href = "www.xxx.com";
로그인 후 복사

jquery: 코드는 다음과 같습니다.

$("#myId").attr("href","www.xxx.com");
로그인 후 복사

위 내용은 이것이 이 기사의 모든 내용입니다. 모두 마음에 드셨으면 좋겠습니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

jquery ztree는 마우스 오른쪽 버튼 클릭 수집 기능을 구현합니다.

jquery 기반의 전체 텍스트 보기 기능

Jquery easyui 기반으로 특정 탭 선택

위 내용은 jquery 주소 표시줄 링크와 레이블 링크를 일치시키는 특수 효과의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿