如何使用JavaScript或PHP在运行时更改HTML元素的CSS属性？

Question

我开发了一个包含php页面的PHP网站。 这些网页具有页眉和页脚分区。 我将Header和Footer分区放在单独的php文件中，然后使用php include函数将它们include 。

问题是我有链接到标题和页脚php文件中的主菜单。

在使用include函数之前，我使用了link标签的CSS Class属性以不同的格式显示当前选择的链接。

<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属性，以便我可以在运行时修改类属性？ 我怎样才能做到这一点？

我非常感谢您的帮助和感谢。

Answer 1

如果在php中你可以在类似的条件下写class="current" 。

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

Answer 2

您可以使用ajax加载页面。 我是说把你的页面分成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();
    });
}

这只是一个解决方案。 它可以帮助您更新页面内容而无需刷新，因此您的所有JavaScript数据都保持不变。 Ajax使您的网站更快。