JS 를 사용 하여 내 비게 이 션 전환 시 하 이 라 이 트 를 표시 하 는 예제 설명

7819 단어 JS전환 하 다.하 이 라이트
index.html 코드 내용

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>      </title>
	<style type="text/css">
		body{
			font-size:20px;
		}
		.nav{
			list-style-type: none;
			margin:0;
			padding:0;
		}
		.clear:after{
			content:'/20';
			display:block;
			clear:both;
			height:0;
			visibility: hidden;
		}
		.nav li{
			float:left;
			background:#B1DFF5;
			margin-right:1px;
			color:#fff;
		}
		.nav li a{
			display:block;
			height:45px;
			width:120px;
			line-height:45px;
			text-align:center;
			text-decoration:none;
		}
		.active{
			background:#28b1f3;
			font-weight:bold;
		}
	</style>
</head>
<body>
	<ul class="nav clear" id="nav">
		<li><a href="index.html" rel="external nofollow" rel="external nofollow" >  </a></li>
		<li><a href="1.html" rel="external nofollow" rel="external nofollow" >   </a></li>
		<li><a href="2.html" rel="external nofollow" rel="external nofollow" >   </a></li>
		<li><a href="3.html" rel="external nofollow" rel="external nofollow" >   </a></li>
	</ul>
</body>
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript">
	var urlstr = location.href;
	console.log(urlstr+'/');
  var urlstatus=false;
  $("#nav a").each(function () { 
    if ((urlstr + '/').indexOf($(this).attr('href')) > -1&&$(this).attr('href')!='') {
     $(this).addClass('active'); urlstatus = true;
    } else {
     $(this).removeClass('active');
    }
   });
  if (!urlstatus) {$("#nav a").eq(0).addClass('active'); }
</script>
</html>
1.html 코드 내용

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>   </title>
	<style type="text/css">
		body{
			font-size:20px;
		}
		.nav{
			list-style-type: none;
			margin:0;
			padding:0;
		}
		.clear:after{
			content:'/20';
			display:block;
			clear:both;
			height:0;
			visibility: hidden;
		}
		.nav li{
			float:left;
			background:#B1DFF5;
			margin-right:1px;
			color:#fff;
		}
		.nav li a{
			display:block;
			height:45px;
			width:120px;
			line-height:45px;
			text-align:center;
			text-decoration:none;
		}
		.active{
			background:#28b1f3;
			font-weight:bold;
		}
	</style>
</head>
<body>
<ul class="nav clear" id="nav">
		<li><a href="index.html" rel="external nofollow" rel="external nofollow" >  </a></li>
		<li><a href="1.html" rel="external nofollow" rel="external nofollow" >   </a></li>
		<li><a href="2.html" rel="external nofollow" rel="external nofollow" >   </a></li>
		<li><a href="3.html" rel="external nofollow" rel="external nofollow" >   </a></li>
	</ul>
<h1>   </h1>
</body>
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript">
	var urlstr = location.href;
	console.log(urlstr+'/');
  var urlstatus=false;
  $("#nav a").each(function () { 
    if ((urlstr + '/').indexOf($(this).attr('href')) > -1&&$(this).attr('href')!='') {
     $(this).addClass('active'); urlstatus = true;
    } else {
     $(this).removeClass('active');
    }
   });
  if (!urlstatus) {$("#nav a").eq(0).addClass('active'); }
</script>
</html>
효과 도

주의:
1.location.href 는 현재 페이지 의 url 을 가 져 오 는 데 사 용 됩 니 다.
2.현재 페이지 는 index.html 로 저장 해 야 합 니 다.
3.index Of 는 현재 url 에 a 에 대응 하 는 href 가 있 는 지 검색 하 는 데 사 용 됩 니 다.
4.html 마다 똑 같은 네 비게 이 션 구 조 를 가지 고 있 습 니 다.
5.eq(index/-index)는 현재 체인 작업 중의 N 번 째 JQuery 대상 을 가 져 오고 JQquery 대상 을 되 돌려 줍 니 다.매개 변수 가 0 보다 크 면 정방 향 으로 선택 합 니 다.예 를 들 어 0 은 첫 번 째 를 대표 하고 1 은 두 번 째 를 대표 합 니 다.매개 변수 가 마이너스 일 때 역방향 으로 선택 합 니 다.예 를 들 어-1 은 꼴찌 의 첫 번 째 를 대표 합 니 다.
확장 지식:js 내 비게 이 션 메뉴 클릭 전환 선택 시 하 이 라이트 상태 방법
include()나 require()함 수 를 통 해 서버 에서 PHP 파일 을 실행 하기 전에 이 파일 에 파일 의 내용 을 삽입 할 수 있 습 니 다.
그것들 이 오 류 를 처리 하 는 방식 이 다른 것 을 제외 하고 이 두 함 수 는 다른 방면 에서 모두 같다.
include()함수 가 경 고 를 생 성 합 니 다(단,스 크 립 트 는 계속 실 행 됩 니 다).
require()함 수 는 치 명 적 인 오류(fatal error)를 생 성 합 니 다(오류 가 발생 하면 스 크 립 트 가 실 행 됩 니 다).
이 두 함 수 는 여러 페이지 에서 중복 사용 할 수 있 는 함수,머 릿 말,꼬 릿 말 또는 요 소 를 만 드 는 데 사 용 됩 니 다.
이것 은 개발 자 를 위해 많은 시간 을 절약 할 것 이다.
모든 웹 페이지 에서 인용 할 표준 머 릿 말 이나 메뉴 파일 을 만 들 수 있 음 을 의미 합 니 다.머 릿 말 을 업데이트 해 야 할 때 포 함 된 파일 만 업데이트 하면 됩 니 다.또는 웹 사이트 에 새 페이지 를 추가 할 때 메뉴 파일 만 수정 하 십시오(모든 웹 페이지 의 링크 를 업데이트 하 는 것 이 아 닙 니 다).
이때 이런 문제 가 발생 한다.네 비게 이 션 하 이 라 이 트 는 어떻게 처리 해 야 합 니까?
공공 코드 가 제시 되면 각 페이지 의 네 비게 이 션 항목 에 class=active 속성 을 추가 하여 수정 할 수 없습니다.이 때 는 자바 script 을 사용 하여 해결 해 야 합 니 다.
코드 는 다음 과 같 습 니 다:

<script type="text/javascript" src="http://www.daixiaorui.com/Public/js/jquery.min.js"></script>
<style>
 .menu { padding:0; margin:0; list-style-type:none;}
 .menu li { background:#FFD1A4; margin-right:1px; float:left; color:#fff; }
 .menu li a { display:block; width:80px; text-align:center; height:32px; line-height:32px; color:#fff; font-size:13px; text-decoration:none;}
 
 .cur{ background:#D96C00; font-weight:bold;}
</style>
 
<ul class="menu" id="menu">
 <li><a href="demo1.html?aa=1" rel="external nofollow" >  </a></li>
 <li><a href="demo1.html?aa=2" rel="external nofollow" >   </a></li>
 <li><a href="demo1.html?aa=3" rel="external nofollow" >   </a></li>
</ul>
 
<script type="text/javascript">
 var urlstr = location.href;
 //alert(urlstr);
 var urlstatus=false;
 $("#menu a").each(function () {
  if ((urlstr + '/').indexOf($(this).attr('href')) > -1&&$(this).attr('href')!='') {
   $(this).addClass('cur'); urlstatus = true;
  } else {
   $(this).removeClass('cur');
  }
 });
 if (!urlstatus) {$("#menu a").eq(0).addClass('cur'); }
</script>
실행 효과:

이상 JS 를 사용 하여 네 비게 이 션 전환 을 실현 할 때 하 이 라 이 트 를 표시 하 는 예제 설명 은 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.참고 하 시기 바 랍 니 다.여러분 들 도 저 희 를 많이 사랑 해 주시 기 바 랍 니 다.
JavaScript 유 틸 리 티 코드 팁
Vue 메뉴 표시 줄 을 클릭 하여 하나의 class(하 이 라이트)로 전환 하 는 방법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage