Jump to content

How Do I Insert An Attribute Into A Specific Element?


Fluoresce

Recommended Posts

I have a list menu like this:

 

<ul>
<li><a class="active" href="page.php?id=1">Lorem Ipsum</a></li>
<li><a href="page.php?id=2">Lorem Ipsum</a></li>
<li><a href="page.php?id=3">Lorem Ipsum</a></li>
<li><a href="page.php?id=4">Lorem Ipsum</a></li>
</ul>

 

How do I get the class attribute (class="active") to be inserted into the right <li> element without using loads of if/else statements?

 

In other words, if someone clicks the third link, how do I get the class attribute to be inserted into the third <li> element when the visitor lands on page.php?id=3 without using if/else?

 

Any help will be much appreciated.

Link to comment
Share on other sites

Something like this should do the trick.

 

 

<ul>
<li><a<?php echo isset($_GET['id'] && $_GET['id'] == 1) ? " class='active'" : "";?> href="page.php?id=1">Lorem Ipsum</a></li>
<li><a<?php echo isset($_GET['id'] && $_GET['id'] == 2) ? " class='active'" : "";?> href="page.php?id=2">Lorem Ipsum</a></li>
<li><a<?php echo isset($_GET['id'] && $_GET['id'] == 3) ? " class='active'" : "";?> href="page.php?id=3">Lorem Ipsum</a></li>
<li><a<?php echo isset($_GET['id'] && $_GET['id'] == 4) ? " class='active'" : "";?> href="page.php?id=4">Lorem Ipsum</a></li>
</ul>

Link to comment
Share on other sites

In order to cut down the repeated code, I'd do something like this:

<?php// Define variables for later use.
$active = array ();

// Check if page has been selected.
if (isset ($_GET['id']) {
   // If it has, retrieve it's ID and add the active class to it's associated link.
   $page = (int) $_GET['id'];
   $active[$page] = ' class="active"');
}


?>
<ul>
   <li><a<?php echo !isset ($active[1]) ?: $active[1]); ?> href="page.php?id=1">Lorem ipsum</a></li>
   <li><a<?php echo !isset ($active[2]) ?: $active[2]); ?> href="page.php?id=2">Lorem ipsum</a></li>
   <li><a<?php echo !isset ($active[3]) ?: $active[3]); ?> href="page.php?id=3">Lorem ipsum</a></li>
   <li><a<?php echo !isset ($active[4]) ?: $active[4]); ?> href="page.php?id=4">Lorem ipsum</a></li>
</ul>

 

Might even create the menu with a loop, to further condense it. Especially if there were more lines, and they all followed the same pattern. Then I'd end up with something like this:

// Define variables for later use.
$menu = '';

// Check if page has been selected, and retrieve the ID.
if (!isset ($_GET['id'] || !$page = (int) $_GET['id']) {
   // Couldn't find the ID, or it was not a number, set default to 1.
   $page = 1;
}

// Define the menu item template for sprintf ().
$menuTemplate = "\t".'<li><a%3$s href="page.php?id=%1$d">%2$s</a></li>'."\n"

// Loop through the array containing the details on the link to the pages.
foreach ($pages as $id => $text) {
   // If the current page has been selected, mark it as active.
   $ap = ($id == $page) ? ' class="active"' : ''; 

   // Add the current page to the menu, making sure to protect ourselves against HTML injection attacks.
   $menu .= sprintf ($menuTemplate, $id, htmlspecialchars ($text, ENT_QUOTES, 'UTF-8'), $ap);
}

// Finalize the menu.
$menu "<ul>\n{$menu}</ul>\n";

 

This will allow you to easier change the menu, especially if you have a few more items, or if it changes frequently. It'll also allow you to save the links somewhere else, as for example in a database, and it'll make it easier to support multiple languages.

What method is best to use, however, is something you'll have to decide on a case-by-case basis. :)

Edited by Christian F.
Link to comment
Share on other sites

<?php

$page  = isset($_GET['id']) ? $_GET['id'] : 1;
$pages = array("Lorem Ipsum", "Lorem Ipsum", "Lorem Ipsum", "Lorem Ipsum");

$count = count($pages);
for ($i = 1; $i <= $count; $i++)
{
   echo "<li><a href='page.php?id={$i}'" . ($page == $i ? " class='active'" : "") . ">" . $pages[$i - 1] . "</a></li>\n";
}

?>

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.