php tab select

KingOfTheSouth · 07-06-2011, 01:24 PM

Hey everyone, I have come to something I am working on for my website template. I have a top navigation that are tabs and when you click a tab to the next page it pops out the next tab as the selected tab. Very basic with HTML this is my sample code for it.

Code:

      <ul>
        <!-- **** INSERT NAVIGATION ITEMS HERE (use id="selected" to identify the page you're on **** -->
        <li><a id="selected" href="index.php">home</a></li>
        <li><a href="about.php">about</a></li>
        <li><a href="portfolio.php">portfolio</a></li>
        <li><a href="services.php">services</a></li>
        <li><a href="contact.php">contact</a></li>
        <li><a target="_blank" href="/blog">blog</a></li>
      </ul>

Quote:

Note: The files do have a .php file extension but I have very little php in the files the site in mostly HTML.

So now that I explained that part I am looking for a solution to do it in PHP or JavaScript if possible. If anyone can help me with a easy solution it would be much appreciated.

tony · 07-06-2011, 02:28 PM

so for example if I click portfolio. it would take me to porfolio.php but the portfolio tab in the nav would have the selected id? I might have understood wrong, but that is always a high possibility this early.

to keep it as you have it now. I would just use something like:

PHP Code:


			
<?php

$page = basename(__FILE__);

$sel = 'id="selected"';

?>

<ul>

  <!-- **** INSERT NAVIGATION ITEMS HERE (use id="selected" to identify the page you're on **** -->

  <li><a <?php if($page == 'index.php'){ echo $sel; } ?> href="index.php">home</a></li>

  <li><a <?php if($page == 'about.php'){ echo $sel; } ?>  href="about.php">about</a></li>

  <li><a <?php if($page == 'portfolio.php'){ echo $sel; } ?>  href="portfolio.php">portfolio</a></li>

  <li><a <?php if($page == 'services.php'){ echo $sel; } ?>  href="services.php">services</a></li>

  <li><a <?php if($page == 'contact.php'){ echo $sel; } ?>  href="contact.php">contact</a></li>

  <li><a target="_blank" href="/blog">blog</a></li>

</ul>

a bit repetitive, but it works

core1024 · 07-08-2011, 07:58 AM

Here is my js solution.

HTML Code:

    <ul id="tabs">
      <!-- **** INSERT NAVIGATION ITEMS HERE (use id="selected" to identify the page you're on **** -->
      <li><a href="index.php">home</a></li>
      <li><a href="about.php">about</a></li>
      <li><a href="portfolio.php">portfolio</a></li>
      <li><a href="services.php">services</a></li>
      <li><a href="contact.php">contact</a></li>
      <li><a target="_blank" href="/blog">blog</a></li>
    </ul>
    <script type="text/javascript">
      window.onload=function () {
        function tabSelector (tabs) {
          function basename (location) {
            return location.split('/').pop().split('?').shift().split('#').shift();
          }
          var current = basename(window.location.href);
          var ti;
          for (ti in tabs) {
            if (typeof(tabs[ti]) === 'object')
              tabs[ti].id = (basename(tabs[ti].href) == current) ? 'selected' : null;
            }
          }
          tabSelector (document.getElementById('tabs').getElementsByTagName('a'));
        }
    </script>

Parkinson4 · 11-28-2011, 11:28 AM

It's really not all that hard (at least compared to some things). There are a number of ways. One easy(?) way is to define a function that accepts an argument to indicate which one is selected:
PHP Code:
function tabs($active)
{
$tabs = array(
'Home' => '/index.php',
'About Us' => '/about/index.php',
'Contact Us' => '/contact/index.php'
);
echo "<ul id='tabs'>";
foreach($tabs as $label => $path)
{
if($label == $active)
{
echo "<li class='active'>$label</li>\n";
}
else
{
echo "<li><a href='$path'>$label</a></li>\n";
}
}
echo "</ul>\n";
}
Then in your pages:
PHP Code:
<html>...<body>
<?php
include $_SERVER['DOCUMENT_ROOT'].'/includes/functions.php';
tabs('Home');
?>
rest of page...