디렉토리 이름을 클릭하여 색상을 변경하는 효과에 대한 JS 구현 예-JS 튜토리얼-php.cn

디렉토리 이름을 클릭하여 색상을 변경하는 효과에 대한 JS 구현 예

眼眸间的深情

풀어 주다： 2021-07-21 09:25:08

원래의

1541명이 탐색했습니다.

특수효과를 아주 좋아하고 몇몇 기업 웹사이트의 내비게이션 클릭 효과도 마음에 들지만, 클릭 효과를 아무리 사용해도 별로 이상적이지 않아서 이 효과에 고민이 생겼습니다. JS 관련 변경 효과를 배우면서 마침내 기업을 실현했습니다. 사이트 탐색 모음에서 디렉토리 이름을 클릭하는 색상 변경 효과의 예를 아래에 공유하겠습니다.

우선 최종적으로 보여드리겠습니다. 모두가 볼 수 있는 효과:

디렉토리 이름을 클릭하여 색상을 변경하는 효과에 대한 JS 구현 예 위 그림에 표시된 것처럼 우리가 달성해야 하는 효과 사용자가 해당 탐색 모음을 클릭하면 해당 탐색 모음 이름의 색상이 변경되어 사용자에게 현재 페이지에 있습니다.

이제 위의 충돌 효과를 달성하는 HTML 및 JS 코드를 보여드리겠습니다.

먼저 프런트 엔드 HTML 코드를 보여드리겠습니다.

<div>
<div>
   <ul>
       <li><a class="location now" href="{:U(&#39;Index/index&#39;)}">首页</a></li>
            <li><a  href="{:U(&#39;Index/product&#39;)}">产品展示</a></li>
            <li><a  href="{:U(&#39;Index/about&#39;)}">关于我们</a></li>
            <li><a  href="{:U(&#39;Index/news&#39;)}">新闻资讯</a></li>
            <li><a  href="{:U(&#39;Index/video&#39;)}">视频中心</a></li>
            <li><a  href="{:U(&#39;Index/contact&#39;)}">联系我们</a></li>
        </ul>
    </div>
</div>

로그인 후 복사

그런 다음 JS 코드를 보여드리겠습니다.

<script type="text/javascript">
    $(function () {
        var url = decodeURI(location.pathname+location.search);
        $(".location").each(function () {
            if ($(this).attr(&#39;href&#39;) == url)
            {
                $(this).addClass(&#39;now&#39;)
            }else {
                $(this).removeClass(&#39;now&#39;)
            }
        })
    })
</script>

로그인 후 복사

3. 분석:

프런트 엔드 페이지:

이제 클래스 이름 위치가 있는 요소는 변환된 색상의 레이블입니다.

JS 코드:

decodeURI(): encodeURI() 함수로 인코딩된 URI를 디코딩할 수 있습니다.

location.pathname: 얻은 결과는 브라우저 주소 표시줄의 전체 주소 문자열입니다.

location.search: URL 경로에서 ?

분석 예:

접근한 URL 경로는 다음과 같습니다.

http://www.zywpro.com/Home/Index/about.html?id=1&name=wdy&password=password

location.pathname 얻은 결과는 다음과 같습니다. :

http://www.zywpro.com/Home/Index/about.html?id=1&name=wdy&password=password

location.search 결과는 다음과 같습니다:

?id=1&name=wdy&password=password

Each(): 일치하는 각 요소에 대해 실행할 함수를 지정합니다. false를 반환하면 루프를 조기에 중지하는 데 사용할 수 있습니다.

예:

각 li 요소의 텍스트를 출력합니다.

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("li").each(function(){
      alert($(this).text())
    });
  });
});
</script>
</head>
<body>
<button>输出每个列表项的值</button>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>
</body>
</html>

로그인 후 복사

attr(): 선택한 요소의 속성 값을 설정하거나 반환합니다. attr(하나의 값은 선택한 요소의 값을 반환하고, 두 개의 값은 선택한 요소의 값을 설정합니다)

addClass(): 선택한 요소에 하나 이상의 클래스를 추가합니다.

removeClass(): 선택한 요소에서 하나 이상의 클래스를 제거합니다.

색 변경 효과를 얻기 위한 이 간단한 클릭 탐색이 실현되었습니다. 매우 간단해 보이지만 많은 프런트 엔드 지식이 필요하므로 모든 간단한 일을 진지하게 수행하므로 아무리 복잡한 일이라도 만남을 통해 복잡함을 단순함으로 바꿀 수 있고, 문제를 더 잘, 더 빠르게 처리할 수도 있습니다! 동료 PHP 개발자 여러분, 계속해서 좋은 일을 해주세요!

위 내용은 디렉토리 이름을 클릭하여 색상을 변경하는 효과에 대한 JS 구현 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!