CODEWITHSUNDEEP
htmlcssmenu
Mahesha999
Mahesha999

Reputation: 24721

Highlight the tab/menu selected

There are many tuts floating online explaining how to construct good looking menus/tabs. There are plenty of menu plugins in jQuery.

But I am unaware of how can I maintain the clicked menu highlighted when I am on specific page corresponding to the clicked menu.

I want this to do in plain html/css/JS and that too with single header file, so that any style changes made to the file will display updated menus.

For example, say there are three menus (no submenus) Home, Tuts, Contact Us. I can create them with <ul> and style using CSS. I can have <a> inside uls so that I can direct clicks to different pages. I put the whole <ul> in separate file header.jsp and I included that file at top of every of my page so that any change to header.jsp will reflect to all pages. But how can I ensure that when I click on menu and page opens up, that menu remains highlighted in some way (say backcolor) giving sense of what menu that page belongs to.

Upvotes: 1

Views: 3167

Answers (2)

Pawan Lakhara
Pawan Lakhara

Reputation: 1150

try this

HTML

 <ul>
  <li id="lnkHome">Home
  </li>
  </ul>

Script

<script>
        $(document).ready(function (event) {
            $("#lnkHome").addClass("highlight");
     });

    </script>

CSS

.highlight
{
    color: Black;
    -moz-box-shadow: inset 0 0 20px #000000;
    -webkit-box-shadow: inset 0 0 20px #000000;
    box-shadow: inset 0 0 20px #000000;
}

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167162

Say, if you run PHP on the server, and the URL pointing is like:

http://localhost/?tab=new

You initially have the code this way:

<ul class="tabs">
    <li>New</li>
    <li>Old</li>
    <li>Bye</li>
</ul>

And in PHP, what you need to do based on the clicked, value, you need to give this:

<ul class="tabs">
    <li<?php if ($_GET["tab"] == "new") echo ' class="active"'; ?>>New</li>
    <li>Old</li>
    <li>Bye</li>
</ul>

And in the .active class, write the rule.

The full code would be something like this:

<ul class="tabs">
    <li<?php if ($_GET["tab"] == "new") echo ' class="active"'; ?>><a href="/?tab=new">New</a></li>
    <li<?php if ($_GET["tab"] == "old") echo ' class="active"'; ?>><a href="/?tab=new">Old</a></li>
    <li<?php if ($_GET["tab"] == "bye") echo ' class="active"'; ?>><a href="/?tab=new">Bye</a></li>
</ul>

This is in the case of PHP. Change it according to your language.

If you want to do in the same page, then you can use jQuery tabs like stuff.

Upvotes: 1

Related Questions