TalkPHP - php tab select

TalkPHP (http://www.talkphp.com/forums.php)

- General (http://www.talkphp.com/general/)

- - php tab select (http://www.talkphp.com/general/5904-php-tab-select.html)

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.

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

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>

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