현재 메뉴 문제 강조 표시

Question

탐색 모음의 현재 메뉴 페이지를 강조 표시 할 수없는 이유를 모르겠다. (사실 초보자 인 점을 제외하면 :-) JQuery 함수를 사용하고 있는데, 내가 그물에서 발견 한 많은 사람들 중 하나, 그들 중 누구도 일하고 ​​있지 않습니다. 기능은 다음과 같습니다

<script type="text/javascript"> 
    $(function(){ 
     var path=window.location.pathname; 
     path=path.replace(/\/$/, ""); 
     path = decodeURIComponent(path); 

     $('#menu a').each(function() { 
      var href=$(this).attr('href'); 
      if (path.substring(0, href.length) === href) { 
      $(this).closest('li').addClass('active'); 
     } 

     }); 

     }); 
    </script> 

내 CSS는 다음과 같습니다

@charset "UTF-8"; 
/* CSS Document */ 

#menu{ width:100%; height:40px; background-color: pink; border-bottom: 1px silver solid;} 

#menu ul { 

    list-style: none; 
    margin:0 auto; 
    position: relative; 
    padding:5px 0; 
    width: 940px; 
} 

#menu ul li { 
    display:inline; 
    margin-left: 150px; 

      } 

#menu li:first-child { 
    margin-left:0; 
    }   

#menu ul li a { 
    color: silver; 
    display:block-inline; 
    font: 16px "Comic Sans MS", cursive; 
    text-align: center; 
    text-decoration: none; 
     } 


#menu ul li a:hover { 
    background-color: yellow; 
    text-decoration:underline; 
} 
.active{ 
    color:green; 
    } 

HTML 태그는 다음과 같습니다 내 CSS를 아마 잘못 모르는

<?php 
echo<<<END 

    <div id="menu"> 
        <ul> 
        <li><a id="home" style="color:white; font-size:16px;" href="$doc_root/index.php" title="Home Page">Enzo</a></li> 
        <li><a id="travel" href="$doc_root/travel/grid.php" title="My Trips"><span>travelling</span></a></li> 
        <li><a id="images" href="#">images</a></li> 
        <li><a id="words" href="#">words</a></li> 
        <li><a id="about" href="#">about</a></li> 
        </ul> 
      </div> 
END; 
?> 

. 단순함을 위해서 색상은 녹색입니다. 나는 "활성"클래스가 CSS 메뉴 페이지에 올바르게 삽입되어 있는지 확신하지 못합니다. Pls는 문제를 해결하기위한 몇 가지 힌트 또는 다른 해결책을 제공합니다. 사랑 U 모든 :-)

Answer 1

그냥 내가 가정은 $있는 doc_root는 PHP 변수는 짧은 개방 PHP 태그

시도에 설정이없는 경우

<?=$doc_root?> 

대안 형식으로되어 있는지 확인

<?php echo $doc_root; ?> 

대신.

이것은 html로 올바르게 작성되도록하는 것입니다. 브라우저에서 작업 소스를보고 변수 $ doc_root의 값이 아니라 $ doc_root를 볼 수 있다면 문제가있는 위치 일 것입니다.

Answer 2

는

자바 스크립트가 수정

코드에서 변경의 몇 가지가 있습니다

$(function() { 
      var path = window.location.pathname; 
      path = path.replace(/\/$/, ""); 
      path = decodeURIComponent(path); 

      $('#menu a').each(function() { 
       var href = $(this).attr('href'); 
       if (href.indexOf(path) != -1) { 
        $(this).closest('li').find('a').addClass('active'); 
       } 

      }); 

     }); 

수정 CSS

#menu ul li a {  
    display:block-inline; 
    font: 16px "Comic Sans MS", cursive; 
    text-align: center; 
    text-decoration: none; 
     } 

HTML

<div id="menu"> 
      <ul> 
       <li><a id="home" href="http://localhost:50160/SelectedMenu.aspx" title="Home Page">Enzo</a></li> 
       <li><a id="travel" href="#" title="My Trips"><span>travelling</span></a></li> 
       <li><a id="images" href="#">images</a></li> 
       <li><a id="words" href="#">words</a></li> 
       <li><a id="about" href="#">about</a></li> 
      </ul> 
     </div>