"menu"에서 현재 페이지에 활성 클래스 추가

Question

모든 페이지에서 헤더 부분을 호출하는 header.php 파일을 만들었습니다 ... 이제는 페이지에 있다면 두 클래스를 적용 할 수 있습니다.

자바 스크립트 :

<?php 
session_start(); 
?> 

<script type="text/javascript"> 
var path = window.location.pathname.split('/'); 
path = path[path.length-1]; 

if (path !== undefined) { 
    $("#menu") 
     .find("a[href$='" + path + "']") // gets all links that match the href 
     .parents('li') // gets all list items that are ancestors of the link 
     .children('a') // walks down one level from all selected li's 
     .addClass('active'); 
} 
</script> 
<script type="text/javascript"> 
var path = window.location.pathname.split('/'); 
path = path[path.length-1]; 

if (path !== undefined) { 
    $("#menu") 
     .find("a[href$='" + path + "']") // gets all links that match the href 
     .parents('li') // gets all list items that are ancestors of the link 
     .children('a') 
     .children('span') // walks down one level from all selected li's 
     .addClass('curant'); 
} 
</script> 

<div id="header"> 
    <h1><a href="home.php"><img src="images/logo.png" width="184" height="77" alt=""></a></h1> 
    <div class="header_left"> 
    <h2>Customer Relationship <span>Management System</span></h2> 
    <div class="PoweredBy"> 
    <h3> PoweredBy:</h3> 
    <div class="PoweredBy_image"><a href="#"><img src="images/PoweredBy-logo.png" alt=""></a></div> 
    </div> 
    </div> 
<div class="menu" id="menu"> 
<div class="menu_leftbg"></div> 
    <div class="nav"> 
    <ul> 

    <li class="home"><a href="home.php"><span><img src="images/home-page.png" alt=""></span></a></li> 
    <li><a href="all_inquiry.php"><span >All Enquiry</span></a></li> 
    <li><a href="booking.php"><span >Book Now</span></a></li> 
    <li><a href="all_booking.php"><span >All Booking</span></a></li> 
    <li><a href="#"><span >Send SMS</span></a></li> 
    </ul> 

    <div class="right_nav"> 
    <h3>Welcome! <?php if(loggedin()){?><span><?php echo $_SESSION['username']; echo $_COOKIE['username']; }?></span></h3> 
<?php if(loggedin()){ ?> <h2><a href="logout.php">Log Out</a></h2><?php } ?> 
    </div> 
    </div> 
    <div class="menu_rightbg"></div> 
</div> 
</div> 

Answer 1

DOM 준비에서 스크립트를 실행해야합니다.

$(function(){ 
    var split = window.location.pathname.split('/'); 
    var mnurl = split[split.length-1]; 
    $('#menu a[href="' + mnurl + '"]').addClass("menu-selected").children('span').addClass("curant"); 
}) 

데모 : 제대로 Fiddle

Answer 2

보십시오 ....이 메뉴에 지정된 버튼을 ... 나는이 작업을 수행하려고했지만 그것을 수행하는 방법에 나를 인도 제발 ... 제대로 작동하지

$(function() { 
    var mnurl = window.location.href.substr(window.location.href.lastIndexOf("/") + 1); 

    $("ul.menu").each(function() { 
     if ($(this).attr("href") == mnurl) $(this).addClass("menu-selected"); 
    }) 
}); 

css :

.menu-selected{ color: #ccc !important;}