如何在运行时使用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属性？

回答

相关问题