Выделите вкладку/меню, выбранные

Question

Есть много сообщений, плавающих в Интернете, объясняющих, как создавать красивые меню/вкладки. В jQuery есть много плагинов меню.

Но я не знаю, как я могу сохранить выбранное меню, выделенное, когда я нахожусь на конкретной странице, соответствующей выбранному меню.

Я хочу, чтобы это выполнялось в виде простого html/css/JS, и это тоже с одним заголовочным файлом, так что любые изменения стиля, внесенные в файл, будут отображаться в обновленных меню.

Например, скажем, что существует три меню (нет подменю) Главная, Tuts, Свяжитесь с нами. Я могу создать их с помощью <ul> и стилей с использованием CSS. У меня может быть <a> внутри ul s, чтобы я мог нажимать на разные страницы. Я поместил весь <ul> в отдельный файл header.jsp, и я включил этот файл в начало каждой моей страницы, чтобы любые изменения в header.jsp отражались на всех страницах. Но как я могу убедиться, что когда я нажимаю на меню и страницу открывается, это меню по-прежнему выделяется каким-либо образом (например, backcolor), что дает представление о том, к какому меню принадлежит эта страница.

Answer 1

Скажем, если вы запускаете PHP на сервере, а также URL, указывающий, как:

http://localhost/?tab=new 

Вы изначально иметь код так:

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

И в PHP, что вам нужно делать, основываясь на кликах значения, вы должны дать это:

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

И в .active классе, писать й е правило.

---

Полный код будет выглядеть примерно так:

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

Это в случае PHP. Измените его в соответствии с вашим языком.

---

Если вы хотите сделать это на той же странице, вы можете использовать вкладки jQuery, подобные материалам.

Answer 2

попробовать этот

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; 
}