如何在運行時使用JavaScript或PHP更改HTML元素的CSS屬性？

我開發了一個包含php頁面的PHP網站。這些網頁有頁眉和頁腳部門。我把Header和Footer部門都放在單獨的php文件中，我使用php include函數將它們包含在內。如何在運行時使用JavaScript或PHP更改HTML元素的CSS屬性？

問題是我有鏈接到頁眉和頁腳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或名稱傳遞爲具有該特定格式和樣式的當前鏈接？如果是這樣，我該怎麼做？

有沒有辦法直接使用PHP來改變HTML元素的CSS屬性，以便我可以在運行時修改類屬性？我怎樣才能做到這一點？

我很感謝您的幫助，並提前致謝。

來源

2011-08-20 TopDeveloper

如果在php你可以在class="current"這樣的條件下寫。

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

來源

2011-08-20 09:09:40 Shameer

謝謝。它適用於這個代碼行，我把它放在每個菜單項中，用菜單php文件中的相應名稱替換頁面名稱，以及在網站中每個php網頁的開始處定義$ page變量。 – TopDeveloper

您可以使用ajax來加載您的頁面。我的意思是把你的頁面分成3部分。 #header，＃內容和#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(); 
    }); 
}

這只是一個解決方案。它可以幫助你更新頁面的內容而無需刷新，所以你所有的JavaScript數據保持不變。 Ajax使您的網站更快。

來源

2011-08-20 09:16:09

如何在運行時使用JavaScript或PHP更改HTML元素的CSS屬性？

回答

相關問題