How I can change the CSS properties of HTML elements in run time using JavaScript or PHP?


Tags: php,javascript,css

Problem :

I developed a PHP website which contains php pages. These web pages have header and footer divisions. I put both the Header and Footer divisions in separate php files and I included them using the php include function.

The problem is that I have links to the main menu in the header and the footer php files.

Before using the include function, I used the CSS Class property of the link tag to display the currently selected link in a different format.

<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>

How can I do the same after using the include function?

Should I use JavaScript to pass the id or name of the link to be the current one with that specific format and style? If so, how do I do that?

Is there a way to use PHP directly to change the CSS properties of the HTML elements so that I can modify the class property during run time? How can I do that?

I appreciate your help and thanks in advance.



Solution :

If in php You can write class="current" inside a condition like.

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

    CSS Howto..

    How to set backround image in css

    How can I make Non-English quotation marks with a help of CSS? [closed]

    How do I integrate a jQuery script in to my html file?

    How to make middle div acting like a fixed positioned header when middle div go to the top place by mouse scrolling

    How to set CSS width so that the element will have the exact window width?

    How can I change the selection text background using CSS?

    How to make my popup window dead center no matter what width it is

    How I can get an Image height and divide it by 2 using Jquery

    Create dom elem on the fly or hide/show

    How to refresh div using ajax refresh?

    How to stop css class on textbox

    how to center anchor tag horizontally css

    How to draw image dynamically on a canvas line between two cells

    How to get 60 fps in css element width animation?

    LESS: How to specify current tag with nesting?

    How to add css class?

    How to align text below an image in CSS?

    How to do a footer in dompdf 6.0 beta 2?

    How to style the ScrollBar using CSS or Javascript? [duplicate]

    How to hide content that is not wrapped by tag using only CSS?

    how can I hide an element inside iFrame using Jquery or CSS

    how to give conditional comments in firefox for a single css style statement

    PNG background image not showing in IE 8< using html5?

    HTML divs, how to wrap content?

    How to center inside divs in a 1140px fluid responsive framework?

    Javascript - How to get all matching classes and selector from css files for an element [duplicate]

    How to get chevron to align to center of link tab

    How to create an absolutely positioned submenu which appears on css hover

    how to change the background color of first row in html table and all other rows alternate color

    How to open a CSS-only popup automatically on page load/using Javascript?