How add class='active' to html menu with php

add class javascript
remove class javascript
add class in css
remove class jquery
javascript add class to body
jquery addclass not working
javascript add class to html
jquery add class on click

I want to put my html navigation in a separate php file so when I need to edit it, I only have to edit it once. The problem starts when I want to add the class active to the active page.

I've got three pages and one common file.

common.php :

<?php 
$nav = <<<EOD
   <div id="nav">
        <ul>
           <li><a <? if($page == 'one'): ?> class="active"<? endif ?> href="index.php">Tab1</a>/</li>
           <li><a href="two.php">Tab2</a></li>
           <li><a href="three.php">Tab3</a></li>
       </ul>
    </div>
EOD;
?>

index.php : All three pages are identical except their $page is different on each page.

  <?php
     $page = 'one';      
     require_once('common.php');
    ?>
    <html>
       <head></head>
       <body>
          <?php echo $nav; ?>
       </body>
    </html>

This simply won't work unless I put my nav on each page, but then the whole purpose of separating the nav from all pages is ruined.

Is what I want to accomplish even possible? What am I doing wrong?

Thanks

EDIT: When doing this, the php code inside the li don't seem to run, it's just being printed as if it was html

Your index.php code is correct. I am including the updated code for common.php below then I will explain the differences.

<?php 
     $class = ($page == 'one') ? 'class="active"' : '';
     $nav = <<<EOD
        <div id="nav">
            <ul>
               <li><a $class href="index.php">Tab1</a>/</li>
               <li><a href="two.php">Tab2</a></li>
               <li><a href="three.php">Tab3</a></li>
           </ul>
        </div>
 EOD;
 ?>

The first issue is that you need to make sure that the end declaration for your heredoc -- EOD; -- is not indented at all. If it is indented, then you will get errors.

As for your issue with the PHP code not running within the heredoc statement, that is because you are looking at it wrong. Using a heredoc statement is not the same as closing the PHP tags. As such, you do not need to try reopening them. That will do nothing for you. The way the heredoc syntax works is that everything between the opening and closing is displayed exactly as written with the exception of variables. Those are replaced with the associated value. I removed your logic from the heredoc and used a tertiary function to determine the class to make this easier to see (though I don't believe any logical statements will work within the heredoc anyway)

To understand the heredoc syntax, it is the same as including it within double quotes ("), but without the need for escaping. So your code could also be written like this:

<?php 
     $class = ($page == 'one') ? 'class="active"' : '';
     $nav = "<div id=\"nav\">
            <ul>
               <li><a $class href=\"index.php\">Tab1</a>/</li>
               <li><a href=\"two.php\">Tab2</a></li>
               <li><a href=\"three.php\">Tab3</a></li>
           </ul>
        </div>";
 ?>

It will do exactly the same thing, just is written somewhat differently. Another difference between heredoc and the string is that you can escape out of the string in the middle where you can't in the heredoc. Using this logic, you can produce the following code:

<?php 
     $nav = "<div id=\"nav\">
            <ul>
               <li><a ".(($page == 'one') ? 'class="active"' : '')." href=\"index.php\">Tab1</a>/</li>
               <li><a href=\"two.php\">Tab2</a></li>
               <li><a href=\"three.php\">Tab3</a></li>
           </ul>
        </div>";
 ?>

Then you can include the logic directly in the string like you originally intended.

Whichever method you choose makes very little (if any) difference in the performance of the script. It mostly boils down to preference. Either way, you need to make sure you understand how each works.

jQuery addClass() Method, Definition and Usage. The addClass() method adds one or more class names to the selected elements. This method does not remove existing class attributes,� Adding a class in the Online Student Center is simple! 1. Log in to the Online Student Center at My.maricopa.edu with your MEID and password. 2. Click the Add a Class link under the Academics heading and Enrollment sub-heading.

why don't you do it like this:

in the pages:

<html>
   <head></head>
   <body>
      <?php $page = 'one'; include('navigation.php'); ?>
   </body>
</html>

in the navigation.php

<div id="nav">
   <ul>
      <li>
          <a <?php echo ($page == 'one') ? "class='active'" : ""; ?> 
                 href="index1.php">Tab1</a>/</li>
      <li>
          <a <?php echo ($page == 'two') ? "class='active'" : ""; ?> 
                  href="index2.php">Tab2</a>/</li>
      <li>
          <a <?php echo ($page == 'three') ? "class='active'" : ""; ?> 
                  href="index3.php">Tab3</a>/</li>
   </ul>
</div>

You will actually be able to control where in the page you are putting the navigation and what parameters you are passing to it.

Later edit: fixed syntax error.

.addClass(), A function returning one or more space-separated classes or an array of classes to be added to the existing class name(s). Receives the index position of the� The class attribute is often used to point to a class name in a style sheet. It can also be used by a JavaScript to access and manipulate elements with the specific class name. It can also be used by a JavaScript to access and manipulate elements with the specific class name.

A very easy solution to this problem is to do this.

<ul>
  <li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'index.php'){echo 'current'; }else { echo ''; } ?>"><a href="index.php">Home</a></li>
  <li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'portfolio.php'){echo 'current'; }else { echo ''; } ?>"><a href="portfolio.php">Portfolio</a></li>
  <li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'services.php'){echo 'current'; }else { echo ''; } ?>"><a href="services.php">Services</a></li>
  <li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'contact.php'){echo 'current'; }else { echo ''; } ?>"><a href="contact.php">Contact</a></li>
  <li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'links.php'){echo 'current'; }else { echo ''; } ?>"><a href="links.php">Links</a></li>
</ul>

Which will output

<ul>
  <li class="current"><a href="index.php">Home</a></li>
  <li class=""><a href="portfolio.php">Portfolio</a></li>
  <li class=""><a href="services.php">Services</a></li>
  <li class=""><a href="contact.php">Contact</a></li>
  <li class=""><a href="links.php">Links</a></li>
</ul>

How do I add a class to a given element?, If you're only targeting modern browsers: Use element.classList.add to add a class: element.classList.add("my-class");. And element.classList.remove to remove� A function returning one or more space-separated classes or an array of classes to be added to the existing class name(s). Receives the index position of the element in the set and the existing class name(s) as arguments. Within the function, this refers to the current element in the set.

I think you need to put your $page = 'one'; above the require_once.. otherwise I don't understand the question.

JavaScript, Adding the class name by using JavaScript can be done in many ways. Using . className property: This property is used to add a class name to the selected element. Syntax: element. className += "newClass"; Using . add() method: This method is used to add a class name to the selected element. Syntax: element. classList. Add Class dialog box. The Add Class dialog box contains templates that allow you to: Open a corresponding code wizard, if one is available. For more information, see Add functionality with code wizards. - or - Automatically create your new class by adding the appropriate files and source code to your project.

Why don't you create a function or class for this navigation and put there active page as a parameter? This way you'd call it as, for example:

$navigation = new Navigation( 1 );

or

$navigation = navigation( 1 );

jQuery, The addClass is an inbuilt method in jQuery which is used to add more property to each selected element. It can also be used to change the� Add two classes to an element How to add two class names to a specified element. Add classes using a function How to add classes to selected elements using a function. Change the class name of an element How to use addClass() and removeClass() to remove one class name, and add a new class name.

Element.classList, of the element. This can then be used to manipulate the class list. outerHTML ); // use the classList API to remove and add classes div. After you fill in the Create New Class dialog fields and click OK, Android Studio creates a .java file containing skeleton code, including a package statement, any necessary imports, a header, and a class or type declaration. Next, you can add your code to this file.

How to Add a Class to a Given Element in JavaScript, Answer: Use the className Property. If you want to add a class to an HTML element without replacing its existing class, you can do something as shown in the� In the Add New Item dialog box, for Class name type BaseballTeam, and then click Open. Note In Visual C# 2005, Open is changed to Add. Examine the code for the new class in the Code View window. Define fields and constructors. From the View menu, click Class View. In the Class View window, expand the ClassesAndObjects project, and then expand

JavaScript: Add a CSS class to an element., This is a tutorial on how to add a CSS class to a HTML element using JavaScript. This can be useful if you need to dynamically alter the appearance of an� If you were on a waitlist and received an Add Code, see the instructions for “Adding a Class with an Add Code” in the MyPortal Registration Guide. Waitlisted students get first consideration for available seats in classes, but it is still possible for other students to try to add courses once school begins.

Comments
  • First, PHP gets not parsed in heredoc strings (only variables) and second, the closing identifier (i.e. EOD) must be at the beginning of the line.
  • yes sorry I know that, thought it would be easier to read it like that. the EOD is at the beginning of the line in my code, thats not the problem. My problem is that it prints exactly what is in the EOD, also the php.
  • the reason is printing the php is because of a syntax error: <? if($page == 'one'): ?> should be <?php if($page == 'one'): ?>
  • so, what is best, make a new file nav.php like Toader Mihai Claudiu suggested, or simply use ".(($page == 'one') ? 'class="active"' : '')." in the string ? since both ways work..
  • Comparing your code and his (which while there is an issue with his use of the heredoc syntax works just fine), I would prefer to come into code looking at his. Variables are declared at the top of the page, and the variables are used to place the navigation. Simple formatting issue, but personal preference. In any case, while your answer is good, it does not address the question asked.
  • i changed it to <?php echo ($page == 'one') ? "class='active'" : ""; ?> and it totally worked! THANKS you rock!
  • There is a principle that i come to cherish since i started to do programming. It's called the locality of information. Basically you would prefer to have all the information required to reason about some code near itself. this allow you to be able to decide locally about the purpose of some piece of code and force you to go in n places to gather that information.
  • @Joseph: Normally i would have written the following: <?php $page = 'one'; include('navigation.php'); ?> something like this: <?php echo navigation(array('page' => 'one')); ?> but it would have been more involved to exemplify easily.
  • so, is it to prefer to make a whole new nav.php file, or would you rather do like joseph suggested, simply use ".(($page == 'one') ? 'class="active"' : '')." in the string ?
  • Hi! There is no difference if I put $page before or after require_once. It still prints the same thing: <div id="nav"> <ul> <li><a <? if($page == 'one'): ?> class="active"<? endif ?> href="index.php">Tab1</a>/</li> <li><a href="two.php">Tab2</a></li> <li><a href="three.php">Tab3</a></li> </ul> </div>
  • PHP gets not parsed in heredoc strings.
  • Ah wait I overlooked something. You have your entire code inside an <<<EOD block. The PHP code you have inside there won't get parsed. Try removing the first 2 and the last 2 lines in your common.php file. (so you only have the HTML left).
  • Mind editing your answer and add elaborating description to it.
  • If You are on news.php page means it activated the current news.php page menu