Member Avatar for niths

hi all,
can anybody tell me how to highlight the active tab in navigation bar...
Thank u.

<tr>
        <td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="15%" align="center" bgcolor="#000000"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image15','','images/home-hover.gif',1)"><img src="images/home-main.gif" name="Image15" width="140" height="40" border="0" id="Image15" /></a></td>
            <td width="0%" align="center" valign="top" bgcolor="#000000"></td>
            <td width="15%" align="center" bgcolor="#000000"><a href="aboutus.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image14','','images/aboutus-hover.gif',1)"><img src="images/aboutus-main.gif" name="Image14" width="140" height="40" border="0" id="Image14" /></a></td></tr>
  • 3 Contributors
  • 2 Replies
  • 227 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Member #334542

Dani AI

Generated

— the table/rollover approach in the original post is a legacy pattern. As suggested, a semantic <nav> with an unordered list and CSS makes the active state simpler, faster, and more accessible. ’s link points at the same goal; below are compact, practical options to implement an “active tab” reliably.

HTML/CSS (preferred)

<nav>
  <ul class="main-nav">
    <li><a href="/index.html" aria-current="page" class="active">Home</a></li>
    <li><a href="/aboutus.html">About</a></li>
    <li><a href="/contact.html">Contact</a></li>
  </ul>
</nav>
.main-nav { list-style:none; margin:0; padding:0; display:flex; }
.main-nav a { display:block; padding:10px 18px; color:#fff; background:#000; text-decoration:none; }
.main-nav a:hover { background:#222; }
.main-nav a.active,
.main-nav a[aria-current="page"] { background:#f60; color:#000; }

Server-side (robust)

  • Add the active class when rendering the page (templates, PHP, ASP.NET, etc.) so the correct tab is set before the HTML reaches the browser. Example (PHP):
    <?php $cur = basename($_SERVER['SCRIPT_NAME']); ?>
<a href="aboutus.php" class="<?= $cur=='aboutus.php' ? 'active' : '' ?>">About</a>

Client-side fallback

  • If server changes are not possible, a small script can normalize pathname, match anchors, add class="active" and aria-current="page".

Troubleshooting notes

  • Normalize trailing slashes and index pages; check case-sensitivity on Linux hosts; confirm base href if present. For visual icons prefer CSS backgrounds/sprites or SVG (avoid image swap JS). Adding aria-current="page" improves screen-reader clarity. Using a single include/partial for the nav makes maintaining the active state trivial.

Recommended Answers

All 2 Replies

Member Avatar for MagicMedia

hi all,
can anybody tell me how to highlight the active tab in navigation bar...
Thank u.

<tr>
        <td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="15%" align="center" bgcolor="#000000"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image15','','images/home-hover.gif',1)"><img src="images/home-main.gif" name="Image15" width="140" height="40" border="0" id="Image15" /></a></td>
            <td width="0%" align="center" valign="top" bgcolor="#000000"></td>
            <td width="15%" align="center" bgcolor="#000000"><a href="aboutus.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image14','','images/aboutus-hover.gif',1)"><img src="images/aboutus-main.gif" name="Image14" width="140" height="40" border="0" id="Image14" /></a></td></tr>

Wow. Did you let Dreamweaver make that for you? No offense but that's ugly as hell. Hover effects should be done in CSS.

Anyway, I get the idea that you want to tab to change depending on the page you're on. IE, if you're on the home page, the home button would be different from the rest.
Normally I would say use ids if you have list navigation, but you're using tables with javascript mouseovers. The easiest thing you can do is just create your highlight image and then just replace the JavaScript on each of your pages. That is the fastest way to do it for you but I still highly suggest that you remake the whole thing in a normal unordered list and style it with CSS.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.