JavaScript 또는 PHP를 사용하여 런타임에 HTML 요소의 CSS 속성을 어떻게 변경할 수 있습니까?

Question

나는 PHP 페이지가있는 PHP 웹 사이트를 만들었습니다. 이 웹 페이지에는 머리글과 바닥 글 구분이 있습니다. 머리글과 바닥 글 구분을 별도의 PHP 파일에 넣었고 PHP include 함수를 사용하여 포함 시켰습니다.

문제는 내가 머리글과 바닥 글 PHP 파일의 주 메뉴에 대한 링크가 있다는 것입니다.

include 기능을 사용하기 전에 링크 태그의 CSS 클래스 속성을 사용하여 현재 선택한 링크를 다른 형식으로 표시했습니다.

<a id="Link_Home" class="current">Home</a> 
<a id="Link_AboutUs" >About Us</a> 
<a id="Link_Branches" >Branches</a> 
<a id="Link_Services" >Services</a> 
<a id="Link_ContactUs" >Contact Us</a> 

include 기능을 사용한 후에 어떻게해야합니까?

JavaScript를 사용하여 링크의 ID 또는 이름을 특정 형식 및 스타일의 현재 ID로 전달해야합니까? 그렇다면 어떻게해야합니까?

런타임 중에 클래스 속성을 수정할 수 있도록 PHP를 사용하여 HTML 요소의 CSS 속성을 직접 변경하는 방법이 있습니까? 어떻게해야합니까?

감사합니다. 미리 감사드립니다.

Answer 1

PHP의 경우 class="current"과 같은 조건 안에 쓸 수 있습니다.

<a id="Link_Home" <?php if($page == 'home'){echo 'class="current"';} ?> >Home</a> 

Answer 2

페이지를로드하는 데 아약스를 사용할 수 있습니다. 페이지를 3 부분으로 나누는 것이 좋습니다. #header, #content 및 #footer. 이것을 jQuery 라이브러리를 사용하여 추가 할 수 있습니다 :

//adding code to all a tags to manually deal links 
$("#footer a").click(function(e){ 
    // check if this has class "current" 
    if($(this).hasClass("current")){ 

    }else{ 
    //remove all class "current" and add one 
    $('#footer a').removeClass("current"); 
    //add class "current" to the selected one 
    $(this).addClass("current"); 
    //get location of the target link 
     var url = $(this).attr("href"); 
     //prevent broswer default behavior, e.g. opening the link in a new window 
     e.preventDefault(); 
     //load html from the given address to #content 
     loadPage(url); 
     } 
}); 

function loadPage(url) { 
    //adding a loading icon 
    $('#content').html('<div id="progress"><img src="images/ajax-loader.gif" /></div>'); 
//when completed, remove the icon 
    $('#content').load(url, function(){ 
     $('#progress').remove(); 
    }); 
} 

이것은 하나의 해결책 일뿐입니다. 새로 고침하지 않고도 페이지 내용을 업데이트 할 수 있으므로 모든 자바 스크립트 데이터는 변경되지 않습니다. Ajax는 사이트를 더 빠르게 만듭니다.