집 > 기사 > 웹 프론트엔드 > jquery(두 가지 방법)_javascript 기술을 기반으로 탐색 메뉴 강조 표시 구현

jquery(두 가지 방법)_javascript 기술을 기반으로 탐색 메뉴 강조 표시 구현

WBOY원래의: 2016-05-16 15:43:361599검색

프로젝트 요구 사항:

구현 원칙: 현재 요소가 선택되면 현재 요소에 스타일을 추가하고, 동일한 레벨 요소에서는 스타일을 제거합니다.

현재 클릭한 메뉴를 강조 표시하려면 다른 탐색 메뉴를 클릭하세요. 탐색 아래의 카테고리를 클릭하면 해당 카테고리가 속한 탐색도 강조 표시되어야 하며, 기사가 속한 탐색 메뉴도 클릭해야 합니다. 강조 표시해야 합니다.

렌더링은 다음과 같습니다.

샘플 코드 1:

구체적인 샘플 코드는 다음과 같습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我爱学习</title>
<style>
body,ul,ol,li,div,p{margin:0px;padding:0px;}
ul{list-style-type:none;border:1px solid blue;background:#4f5b93;height:45px;}
ul li{float:left;heihgt:45px;line-height:45px;width:100px;text-align:center;}
ul li a:link,a:visited{color:#fff;text-decoration:none;}
.act{background:#ff6600;}
</style>
<script src="../jquery.js"></script>
<script>
$(function(){
$('ul li').eq(0).addClass("act");
 $('ul li').each(function(){
  $(this).click(function(){
    $(this).addClass("act").siblings().removeClass("act");
   })
 })
})
</script>
</head>
<body>
<ul>
<li><a href="http://www.52aixuexi.com/">首页</a></li>
<li><a href="http://www.52aixuexi.com/wdwzml/suibi/">随笔</a></li>
<li><a href="http://www.52aixuexi.com/wdwzml/sucai/">素材</a></li>
<li><a href="http://www.52aixuexi.com/wdwzml/biancheng/">编程</a></li>
</ul>
</body>
</html>

샘플 코드 2:

메뉴 수준에서 링크에 rel 속성을 추가하고 href 속성을 저장합니다.

<div id="menu" class="main-nav">
      <dl>
       <dt><a href="/C000001916" class="current">首页<span class="mnl"></span></a></dt>
      </dl>
      <dl>
        <dt><a href="/C000001919&#63;lmbm=1" <span style="color: #ff0000;">rel="/C000001919&#63;lmbm=1"</span>>新闻中心<span class="mnl"></span></a></dt>
        <dd class="sn-c">
          <a href="#">产品理念2</a>
          <em>|</em>
          <a href="#">发展历程</a>
          <em>|</em>
          <a href="#">应用范围</a>
          <em>|</em>
          <a href="#">技术架构</a>
        </dd>
      </dl>
      <dl>
        <dt><a href="/C000001919&#63;lmbm=2" <span style="color: #ff0000;">rel="/C000001919&#63;lmbm=2"</span>>产品介绍<span class="mnl"></span></a></dt>
        <dd class="sn-c sn3">
          <a href="#">产品理念</a>
          <em>|</em>
          <a href="#">发展历程3</a>
          <em>|</em>
          <a href="#">应用范围</a>
          <em>|</em>
          <a href="#">技术架构</a>
        </dd>
      </dl>
    </div>

그런 다음 브라우저 주소 표시줄에서 URL과 rel을 비교하여 동일한 경우 현재 3499910bf9dac5ae3c52d5ede7383485 태그에 클래스를 추가하고 다른 3499910bf9dac5ae3c52d5ede7383485 태그의 클래스를 제거합니다. /javascript">

 var urlstr = location.href;　　　　//获取浏览器的url
 var urlstatus=false;　　　　　　　　//标记
　//遍历导航div
 $("#menu a").each(function () {
//判断导航里面的rel和url地址是否相等
  if ((urlstr + '/').indexOf($(this).attr('rel')) > -1&&$(this).attr('rel')!='') {
   $(this).addClass('cur'); urlstatus = true;
  } else {
   $(this).removeClass('cur');
  }
 });
//当前样式保持
 if (!urlstatus) {$("#menu a").eq(0).addClass('cur'); }
</script>

이것도 기본적으로 효과를 얻을 수 있지만, 탐색 아래에 카테고리가 있으면 그림과 같이 카테고리 URL과 탐색 URL이 일치하지 않게 되고, 그러면 뉴스 URL과 탐색 URL이 일치하게 됩니다. 일치하지 않습니다. 그래서 아직은 좀 말도 안되는 소리입니다....어떻게 해야 할까요?

이게 내 생각이다

URL이 다르기 때문에 탐색-->카테고리->뉴스 사이의 관계를 찾아보세요. 해당 관계는 하나의 탐색 아래에 여러 카테고리가 있을 수 있고 하나의 탐색 아래에 여러 뉴스 기사가 있을 수 있다는 것입니다. 즉, 각 뉴스 또는 카테고리는 탐색에 해당합니다. 그런 다음 해당 카테고리 페이지와 뉴스 페이지에 탐색 식별자인 변수를 정의합니다. 그런 다음 탐색 dc6dce4a544fdca2df29d5ac0ea9906b ; rel 속성. 이 속성을 변수와 비교합니다. 동일한 경우 현재 클래스를 변경합니다.

위 내용은 Jquery를 기반으로 한 탐색 메뉴 강조를 두 가지 방식으로 소개한 것입니다.

성명：

이전 기사：JavaScript의 일반적인 보안 취약점 및 자동 탐지 기술_javascript 기술다음 기사：JavaScript의 일반적인 보안 취약점 및 자동 탐지 기술_javascript 기술

jquery(두 가지 방법)_javascript 기술을 기반으로 탐색 메뉴 강조 표시 구현

관련 기사